Question

我使用以下代码作为调试 - 我只是想查看单选按钮上的点击并正确设置它们的样式。

$("#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);
});

代码似乎工作正常。我得到了“点击！”我看到了孩子输入的正确ID。但是，这段代码正在执行两次，我无法弄清楚为什么（我使用Rails，如果这有任何区别）。

如何追踪调用它的位置和原因？

Answer 1

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

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

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

// bind your click
$("#item-select-form label.radio").click(function() {
...
});

Answer 2

如果您在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

JavaScript / JQuery双重执行

2 个答案: