jquery - 调用checkbox的点击事件好像有错误？

Question

我正在使用 jQuery 1.6.1，我有一个复选框，我想以编程方式检查它，同时也调用它的单击事件。通常我只是调用这个电话:

$('#my_checkbox').click();

首次加载网页时，不会选中该复选框。当我进行上述调用时，它确实按预期触发了单击事件，但在单击事件内 this.checked 仍将返回 false。当单击事件完成时，复选框将被选中。似乎单击事件(以编程方式触发时)是在复选框状态更改之前执行的。如果我实际单击该复选框，this.checked 会正确反射(reflect)该复选框的新状态，即它会在触发事件之前更改状态。

为什么当我以编程方式调用单击事件时，该事件会在状态更改之前触发？我可以采取什么措施来解决这个问题？

Answer 1

这是一个有趣的问题(我已经replicated here)。当然，诱惑是使用 change 处理程序而不是 click 处理程序 ( example )，但问题是 change 不当您使用click 切换状态时，在 IE 上完全不会触发。这可能是不这样做的一个很好的理由。

我想您可以定义自己的机制，不依赖于点击来执行默认操作——一个很小的插件，或者只是一个您调用并传入 jQuery 对象的函数。这是一个小型插件版本:

(function($) {
  $.fn.flip = function() {
    this.prop("checked", !this.prop("checked"));
    this.triggerHandler("click");
    this.triggerHandler("change");
  };
})(jQuery);

用法:

$('my_checkbox').flip();

Live example | source

请注意，如果应用于包含多个复选框的 jQuery 对象，即兴版本将强制它们全部具有相同的值。如果您希望它们独立，您可以循环:

(function($) {
  $.fn.flip = function() {
    this.each(function() {
        this.checked = !this.checked;
    });
    this.triggerHandler("click");
    this.triggerHandler("change");
  };
})(jQuery);

Live example | source

通过使用triggerHandler我们避免引发默认操作，而不是触发。

另一种方法是让复选框的所有点击处理程序使用超时:

$("my_checkbox").click(function() {
    var $this = $(this);
    setTimeout(function() {
        // Actually do something with $this
    }, 0);
});

...这看起来像是一场维护噩梦。