javascript - 关闭活动元素失败

Question

我正在尝试使用 JQuery 的 off 函数取消绑定到容器内元素的所有事件，但是它正在做一些奇怪的事情。

我的代码如下

<div id='container'>
<button id='test_btn'>Test</button>
<button id='live_btn_id1'>Action</button>
<button id='live_btn_id2'>Action</button>
</div>

$("#test_btn").on("click", function(){
$("#container").find("*").off();
});

$("#container").on('click', 'button[id^=live_btn]', function(event) { 
alert("hello");
});

结果是 test_btn 正确停止工作，但“操作”按钮继续工作。但是，如果我执行以下操作：

$("#container").off();

它按预期工作，但这也删除了我附加到容器的东西。这种奇怪的行为有原因吗？

Answer 1

当您使用委托时，您将绑定到元素，而不是后代选择器。

因此，您调用$("#container").on(...并且绑定到#container，而不是live_btn。

.offonlive_btn没有任何意义，因为没有任何东西与它们绑定。

一个可能的解决方案是命名点击事件：

$("#container").on('click.live', 'button[id^=live_btn]' ...
$("#container").off('click.live');