MVCパーシャルビューとJavascript

Question

私は本質的にウィジェットである部分的なビューを持っています。私は同じページにこれらの1と 'n'の間にいたいです。

私の問題は、それぞれが実行するjavascriptを取得できないということです。

Index.cshtml

<div> 
    @Html.Partial("_ButtonPartialView") 
    <br/> 
    <br /> 
    @Html.Partial("_ButtonPartialView") 
</div> 

_ButtonPartialView.cshtml

<h2>ButtonView</h2> 
<button id="foo"> 
    on 
</button> 

BundleConfig.cs

bundles.Add(new ScriptBundle("~/bundles/test").Include(
         "~/Scripts/test.js")); 

Layout.cshtml

@Scripts.Render("~/bundles/test") 

test.js

$(document).ready(function() { 
    $('#foo').click (function() { 
     if ($('#foo').html() === 'on') { 
      $('#foo').html('off'); 
     } else { 
      $('#foo').html("on"); 
     } 
    }); 
}); 

私の問題は、私はそれが上と罰金オフを切り替える最初のボタンをクリックしたときに、です。 2番目のボタンをクリックすると、何も起こりません！

この問題を解決するには、もっと大きな問題があります。私は明らかに、私のパーシャルビューをすべて独立させたいと思っています。例えば私は1つのボタンをクリックしたくないので、それらはすべてトリガーします。彼らはすべてモデルを渡すつもりです。そのモデルを使って情報を表示するJSを書く必要があります。

したがって、各ウィジェットは独立している必要があります。

感謝のコメントで述べたように

Answer 1

、idは一意でなければなりません。 idでボタンを参照する場合は、固有のIDを生成する必要があります。

より明快な方法は、イベントをトリガしたボタンインスタンスを参照するために、$(this)の代わりにクラスセレクタを使用することです。

$(".foo").on("click", function(e) { 
    var btn = $(this); 
    var state = btn.html(); 
    ... 
}); 

Answer 2

動的に追加されたコンテンツにスクリプトをトリガーするには、イベントをドキュメントに結びつける必要があります。あなたのクリックイベントは、IDが一意である