Question

我正在尝试unbind / off一个元素内每个元素的所有事件。我尝试了this解决方案，但是没有用。唯一起作用的是$(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

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

我还删除了main和button上的委托，因为它们具有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>

如何取消绑定元素

3 个答案: