使用jQuery刪除父div中綁定的所有事件

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

這個答案來自上一篇文章如何使用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 in document元素：

$(document).off();

DEMO

編輯：

然后，您需要以這種方式解除綁定：

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

DEMO2