JavaScript / JQuery Double Execution

JavaScript / JQuery Double Execution

本文关键字：Execution Double JQuery JavaScript      更新时间：2023-09-26

我正在使用以下代码作为调试-我只是试图观察单选按钮的点击并适当地设置它们的样式。

$("#item-select-form label.radio").click(function() {
  var child_input, input_id;
  console.log("clicked!");
  child_input = $(this).children("input");
  input_id = child_input.attr("id");
  return console.log(input_id);
});

代码似乎工作正常。我得到了"clicked!"，并且看到了子输入的正确id。然而，这段代码被执行了两次，我不知道为什么(如果有任何区别，我使用Rails)。

我如何追踪它是从哪里和为什么被调用的?

这几乎肯定是因为事件被绑定了多次。jQuery执行所有绑定事件处理程序。

要确保它只执行一次，您应该只绑定它一次。或您应该在再次绑定之前unbind任何绑定的处理程序。例:

// unbind the previously bound handler
$("#item-select-form label.radio").unbind('click');
// bind your click
$("#item-select-form label.radio").click(function() {
...
});

如果您将此事件绑定到ajax响应上，它将被触发多次，您应该在再次绑定之前取消该事件的绑定(如果之前没有绑定它不会导致错误)。此外，您的代码也有改进，您可以使用:

$("#item-select-form").find("label.radio").click...

或

$("#item-select-form").click(function(e){ 
    var elemPressed = $(e.target);
    if( elemPressed ).is("label.radio") ){
      //do your stuff
    }
});

这两种技术都比你原来的选择器(使用sizzle)快，第二种(我最喜欢的)让你为整个页面创建一个事件，而不是创建多个事件(因此，降低性能)到DOM

相关文章：