0

私のhtmlは次のようになります：

<div id="container">
    <div class="sub"></div>
    <div class="sub"></div>
    <div class="sub"></div>
    <div class="sub"></div>
</div>

次に、JavaScriptで、ドキュメント準備機能にクリックリスナーを設定します。

$(document).ready(function(){
    $('.sub').click(function (event) {
        //do something
    });
});

後で、動的に.class要素を追加して、htmlが次のようになるようにします。

<div id="container">
    <div class="sub"></div>
    <div class="sub"></div>
    <div class="sub"></div>
    <div class="sub"></div>

    <div class="sub"></div>
    <div class="sub"></div>
    <div class="sub"></div>
    <div class="sub"></div>
</div>

そして、クリックリスナーをもう一度追加します。

function addListeners(){
  $('.sub').click(function (event) {
        //do something
    });
}

これで、最初の4つの.sub要素に2つのクリックハンドラーがアタッチされ、クリックすると2回起動します。これを行うためのより良い方法はありますか？

4

2 に答える 2

7

イベントを委任できます。

$(document).ready(function(){
    $('#container').on('click', '.sub', function(event) {
        //do something
    });
});
于 2013-02-14T19:35:45.553 に答える
1

この場合、ここOn()の代わりに使用する必要があります。したがって、コードは次のようになります。click()

function addListeners(){
  $('#container').on('click','.sub',function (event) {
        //do something
    });
}

.on()との違いは.click().click()、イベントに関連付けられたDOM要素.click()が後で動的に追加される場合は機能しない可能性がありますが、呼び出しに.on()関連付けられたDOM要素が後で動的に生成される可能性がある状況で使用できることです。.on()

于 2013-02-14T19:36:37.993 に答える