时间戳

首页 > 解决方案 > 由于调试器，Jquery 事件（例如单击）触发了两次

javascript - 由于调试器，Jquery 事件（例如单击）触发了两次

问题描述

很抱歉，我的起源描述不清楚。我修改了我的问题：

我正在使用jQuery，如附图所示，每次我将事件侦听器（例如单击）附加到元素时，它都会触发两次。看起来这个问题是由于 jQuery 调试器造成的。

我想问一下除了在侦听器之前添加 unbind() 或 off() 之外是否还有其他方法来解决问题，我已经尝试过这些方法，但是它删除了已经附加到元素的侦听器（例如我有 #element1 其中在 html 中创建，然后使用 jQuery 将两个元素 #element2 和 #element3 附加到 #element1，如果我使用

    $('#element1').off('click').on('click', '#element2', function(){
       //implementation
    }    
    $('#element1').off('click').on('click', '#element3', function(){
       //implementation
    }

#element2 的单击事件将不再起作用，因为在这种情况下，附加在其上的单击侦听器已被删除。所以我问是否有更好的方法来做到这一点？

顺便说一句，我想知道 VM 7188 侦听器来自哪里（它看起来像是来自 jQuery 调试器），以及是否有办法删除这个侦听器，这样我每次编写侦听器时就不再需要使用 off() ， 谢谢。

附上重复听众的图片

在此处输入图像描述

标签： javascriptjquery

解决方案

尚不清楚为什么您需要删除并附加处理程序#element1只是因为#element2已删除并动态创建；您正在使用委托语法，因此#element2动态创建完全没问题。无论如何，您只需要设置一次该处理程序。例子：

// Note this continues to work even as we remove and recreate #element2
$("#element1").on("click", "#element2", function() {
  console.log("Got the click on #element2");
});

function tick() {
  $("#element1").append("<span id='element2'>Click me</span>");
  setTimeout(function() {
    $("#element2").remove();
    setTimeout(tick, 500);
  }, 1500);
}

tick();
<div id="element1"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

但是要针对特定​​的处理程序，您可以使用事件命名空间，例如：

$('#element1').off("click.my-namespace").on('click.my-namespace', '#element2', function(){
   //implementation
});

有关更多信息，请参阅文档中的“事件名称和命名空间” 。

推荐阅读