Question

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

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

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

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

Answer 1

这是一个有趣的问题（我replicated here）。当然，诱惑是使用change处理程序而不是click处理程序（example），但问题是change不会触发 at当您使用click切换状态时，IE上的所有。这可能是不这样做的好理由。

我想你可以定义自己的机制，它不依赖于click执行默认操作 - 一个小小的插件，或者只是你调用并传入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而不是trigger，我们可以避免导致默认操作。

替代方案是让所有click处理程序使用复选框来使用超时：

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

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

呼叫复选框的点击事件似乎有误吗？

1 个答案: