Question

我有myclass div，里面有很多不同事件绑定的孩子。单击下面的“删除”，我想删除其中所有子项的所有事件绑定。但是下面的代码不起作用。

<div class="myclass">
  <select class="selectable">
    <option value="1">one</option>
    <option value="2">two</option>
  </select>
  <!-- I have many more elements ~30 or so with events associated with them.... -->
  <div id="askme">ask me</div>

</div>
<div class="xyz">i have event on this element too that should remain intact>/div>
<div id="remove">remove</div>

<script language="javascript">

  $(document).on('ready page:load', function () {

    $(document).on("change",".selectable", function(e) {
      //something
    });

    $(document).on("click","#askme",function(e){
      //something
    });

    //more events binding here.....
  });


  // Using http://api.jquery.com/off/
  $("#remove").on('click', function (e) {
    $(".myclass *").off(); //unbind event of all child under `myclass` parent div
  });

</script>

当我点击“删除”时，我想删除与myclass div中所有元素相关联的所有事件。

我不想使用.one来仅调用具有子元素的事件一次。所以这超出了解决这个问题的范围。

注意： 我在文档中有其他dom元素，应该保持不变。所以我不能解开文档级别的事件

Answer 1

此答案来自之前的帖子How to remove all event handlers for child elements of a parent element using JQuery

如果使用bind（）附加事件，则可以使用unbind（）。

$('#foo').children().unbind();
$('#foo').children('.class').unbind(); //You can give selector for limiting clildren

或

如果使用on（）来绑定事件，请使用off（）。

$('#foo').children().off();
$('#foo').children('class').off()

Answer 2

您已将事件附加到document，因此您需要在off元素中执行document：

$(document).off();

DEMO

修改

然后你需要解开这个方式：

$("#remove").on('click', function (e) { $(document).off("click","#askme"); $(document).off("change",".selectable"); });

DEMO2

使用jquery删除父div中绑定的所有事件

2 个答案: