2

jquery ready スコープ内のクラス セレクターによってトリガーされるクリック イベントがあります。

    $(".testBtn").click(function()
    {
        alert("This Works");      
    });

これは静的ボタンでは問題なく機能しますが、「addRowBtn」ID のボタンをクリックすると追加される動的ボタンでは機能しません。イベントが登録された後にボタンが作成されることに関係があると思いますが、それでも新しいボタンには「testBtn」クラスがあるため、機能するはずです。何が間違っているのか、動的ボタンをクラスセレクターのクリックイベントに登録する方法はありますか?

これがコード全体です。コピーして html に貼り付け、「追加ボタン」をクリックして、追加されたボタンをクリックしてみてください。何も起こらないことがわかります。

<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js'></script>
<script>
$(function()
{    
    $(".addRowBtn").click(function()
    {
        $("#mainTable tr:last").after("<tr><td><button class='testBtn'>NotWorking</button></td></tr>");           
    });

    $(".testBtn").click(function()
    {
        alert("This Works");      
    });
});
</script>
</head>
<body>

<table id="mainTable">
<button class="addRowBtn">Add button</button>
<tr><th>Testing</th></tr>
<tr><td><button class='testBtn'>Working</button></td></tr>
</table>
</body>

</html>
4

2 に答える 2

10

ここでの標準的な答えはevent delegationです。これらすべてのボタンの親にフックclickし、次のように、クリックされた実際の要素がセレクターと一致する場合にのみ通知するように jQuery に依頼しますdelegate。

$("#mainTable").delegate(".testBtn", "click", function(e) {
    // ...
});

...またはハイパーオーバーロードを使用してjQuery 1.7+でこのようにon:

$("#mainTable").on("click", ".testBtn", function(e) {
    // ...
});

引数の順序の違いに注意してください。delegate私はそれの明示性を好みます。

実例| ソース

どちらの場合でも、jQuery は にフックclickし#mainTableますが、クリックが発生したときに、一致する.testBtn要素がクリックされた要素と#mainTable. 要素にフックされているかのように、ハンドラーを呼び出します.testBtn。

必要に応じて、あなたにも同じことができることに注意してください.addRowBtn。

于 2012-12-11T11:00:53.847 に答える
0

jquery のデリゲート関数を使用して、現在および将来のすべてのインスタンスにイベント ハンドラーを適用します http://api.jquery.com/delegate/

于 2012-12-11T11:01:41.160 に答える