如何取消绑定元素内的所有事件

Question

我试图unbind / off一个元素中每个元素的所有事件。 我试过这个解决方案，但它不起作用。 唯一有效的是$(document).add('*').off(); 但这不是我需要的。

我做了一个简短的例子，但有更多的元素和事件。
为什么它不能使用这段代码？

 $(document).ready(function() { $(document).on("click", "#contentWithEvents button", function() { console.log("Clicked"); }); $(document).on("mouseenter", "#contentWithEvents li div", function() { console.log("Hovered"); }); $(document).on("click", "#unbind", function() { contentToBeReplaced = $("#contentWithEvents"); contentToBeReplaced.find("*").each(function() { $(this).off(); }); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <header></header> <main id="contentWithEvents"> <button>Click event</button> <button>Click event</button> <button>Click event</button> <ul> <li><div>Hover event</div></li> <li><div>Hover event</div></li> </ul> </main> <button id="unbind">Unbind all events</button> <footer></footer> 

Answer 1

而不是使用$(document)委派文档事件，为什么不直接使用包含父ID和元素类型的选择器委托元素。 这将有助于使用off()取消绑定这些元素的事件（特定事件： .off('mouseenter')或所有事件： .off() ）

 $(document).ready(function() { $("#contentWithEvents button").on("click", function() { console.log("Clicked"); }); $("#contentWithEvents li div").on("mouseenter", function() { console.log("Hovered"); }); $("#unbind").on("click", function() { contentToBeReplaced = $("#contentWithEvents"); contentToBeReplaced.find("*").off(); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <header></header> <main id="contentWithEvents"> <button>Click event</button> <button>Click event</button> <button>Click event</button> <ul> <li> <div>Hover event</div> </li> <li> <div>Hover event</div> </li> </ul> </main> <button id="unbind">Unbind all events</button> <footer></footer> 

Answer 2

似乎最好的方法是委托类选择器，然后在不想再响应事件时删除该类

此外，我已经删除了主要和按钮上的委托，因为他们有一个ID。 如果它们是动态生成的，则需要从最近的静态容器委派它们

 $(document).ready(function() { $("#contentWithEvents").on("click", ".delegated", function() { console.log("Clicked"); }); $("#contentWithEvents").on("mouseenter", ".delegated", function() { console.log("Hovered"); }); $("#unbind").on("click", function() { $("#contentWithEvents .delegated").removeClass("delegated"); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <header></header> <main id="contentWithEvents"> <button class="delegated">Click event</button> <button class="delegated">Click event</button> <button class="delegated">Click event</button> <ul> <li> <div class="delegated">Hover event</div> </li> <li> <div class="delegated">Hover event</div> </li> </ul> </main> <button id="unbind">Unbind all events</button> <footer></footer> 

Answer 3

实际上，你只是以错误的方式使用.off（）命令

 $(document).ready(function() { $(document).on("click", "#contentWithEvents button", function() { console.log("Clicked"); }); $(document).on("mouseenter", "#contentWithEvents li div", function() { console.log("Hovered"); }); $(document).on("click", "#unbind", function() { $(document).off( "click", "#contentWithEvents button" ); $(document).off( "mouseenter", "#contentWithEvents li div" ); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <header></header> <main id="contentWithEvents"> <button>Click event</button> <button>Click event</button> <button>Click event</button> <ul> <li><div>Hover event</div></li> <li><div>Hover event</div></li> </ul> </main> <button id="unbind">Unbind all events</button> <footer></footer>