javascript - 如何使用 .on/off 重新绑定(bind)按钮的点击事件

Question

对于绑定(bind)和取消绑定(bind)事件处理程序，我使用的是 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 时，我会显示一个警告。而当 #load 时，我使用 .off() 取消绑定(bind) #sync_img 的点击事件。

我尝试使用 .on() 重新绑定(bind)它，但我无法重新绑定(bind)它。

这是 JSFiddle

请分享您的建议。

感谢任何帮助。

Answer 1

如果要重新绑定(bind)事件，需要再次指定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");
    }

否则它不知道它必须绑定(bind)到哪个处理程序。

因为您可以将多个处理程序绑定(bind)到一个事件。

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

所以当你想解绑所有的点击事件时，你会使用

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

但是如果你只想取消绑定(bind)单个事件，那么你只需传入要删除的处理程序

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

这只会删除第一个处理程序。但是另一个处理程序仍然触发，因为只有第一个被删除。

Unbind All handlers

Unbind a specific handler