2

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

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

首次加载网页时，未选中该复选框。当我进行上述调用时，它确实按预期触发了 click 事件，但在 click 事件内部this.checked仍将返回 false。当点击事件完成时，复选框被选中。似乎在复选框的状态更改之前执行了单击事件（以编程方式触发时）。如果我真的点击了复选框，this.checked正确地反映了复选框的新状态，即它在触发事件之前改变了状态。

为什么当我以编程方式调用 click 事件时，事件会在状态更改之前触发，我该怎么做才能绕过它？

4

1 回答 1

3

这是一个有趣的问题（我在这里复制了）。当然，诱惑是使用change处理程序而不是click处理程序（示例），但问题是当您使用切换状态时，它根本change不会在 IE上触发。这可能是不这样做的一个很好的理由。click

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

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

用法：

$('my_checkbox').flip();

实例| 来源

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

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

实例| 来源

通过使用triggerHandler而不是trigger，我们避免了导致默认操作。

另一种方法是让所有click复选框的处理程序都使用超时：

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

...这似乎是一场维护噩梦。

于 2012-07-12T14:29:01.727 回答