javascript - 为什么复选框更改了两次？

Question

我这样做:

  $("input[type='checkbox']").each(function() {
    var current = $(this);
    $("label[for='" + current.attr("id") + "']").on('click', function() {
      current.change();
      alert('1');
    });
  });

  $("input[type='checkbox']").on("change", function() {
    alert('2');
  });

现在，当我单击标签时，复选框第一个警告 (1) 显示一次，但第二个 (2) 显示两次。你能告诉我为什么吗？ (该复选框被隐藏，似乎更改以某种方式发生了两次)

Answer 1

您不必为 <label> 添加单独的事件处理程序标签。它将触发 <input> 上的“点击” .

您最好使用“单击”而不是“更改”(尤其是使用最新的 jQuery)。旧的(可能是新的)IE 版本在焦点改变之前不会触发复选框的“改变”。

edit 最新的 jQuery 让生活更美好的原因是它修复了库中长期存在的奇怪“功能”。以前，以编程方式触发“点击”将导致调用任何“点击”处理程序，其中元素处于点击效果发生之前的状态。也就是说，如果你调用

$(myCheckbox).trigger("click");

并且元素被检查，它将在对处理程序的调用中被检查。然而，当发生真实点击时，浏览器会在调用处理程序之前翻转“checked”属性的状态。这让生活变得很奇怪，但从 1.9 开始，我很确定这已经解决了。