1

イベント ハンドラーのバインドとバインド解除には、on()/off()イベント ハンドラー アタッチメントを使用しています。

HTML: 

<div id='load' class="UnfiledContainer">
    <button onclick="loaded()">Try it</button>
    <p id="demo"></p>
</div>

JS: 

$('#sync_img').on('click', function () {
    alert("Sync");
});

loaded = function () {
    $('#sync_img').off('click');  //Works perfectly
    var x = "";
    for (var i = 0; i < 100; i++) {
        x = x + "Thenumberis" + i;
    }
    document.getElementById("demo").innerHTML = x;
    $('#sync_img').on('click');   // This is not rebinding the click event
}

ユーザーが をクリックする#sync_imgと、アラートが表示されます。一方、.off()を使用し#loadてクリック イベントのバインドを解除しています。 #sync_img

.on()を使用して再バインドしようとしましたが、再バインドできませんでした。

ここにJSFiddleがあります

あなたの提案を共有してください。

どんな助けでも大歓迎です。

4

1 に答える 1

2

イベントを再バインドする場合は、eventHandler を再度指定する必要があります。

 // Bind the event
   $('#sync_img').on('click', clickEvent); 

   // Remove the handler
   $('#sync_img').off('click'); 

   // Need to rebind the event passing in the handler again
    $('#sync_img').on('click', clickEvent); 

    function clickEvent() {
       alert("Sync");
    }

そうしないと、どのハンドラーにバインドする必要があるかわかりません。

複数のハンドラを単一のイベントにバインドできるからです。

$('#sync_img').on('click', clickEvent1);
$('#sync_img').on('click', clickEvent2);

したがって、すべてのクリック イベントのバインドを解除する場合は、次を使用します。

$('#sync_img').off('click');

ただし、単一のイベントのみをバインド解除する場合は、削除するハンドラーを渡すだけです。

$('#sync_img').off('click', clickEvent1);

これにより、最初のハンドラーのみが削除されます。ただし、最初のハンドラーのみが削除されたため、他のハンドラーは引き続き起動します。

すべてのハンドラをアンバインド

特定のハンドラーのバインドを解除する

于 2013-08-06T08:45:08.347 に答える