在 jQuery 中，为什么以编程方式在复选框上触发 'click()' 不会立即检查它? [英] In jQuery, why does programmatically triggering 'click()' on a checkbox not immediately check it?

问题描述

更新:这仅适用于 jQuery 1.8 及以下版本.这是 在 jQuery 1.9 中修复的.

这是我的最小 jsfiddle 示例:http://jsfiddle.net/8fuEJ/.我正在使用谷歌浏览器，如果这有什么不同的话.

Here is my minimal jsfiddle example: http://jsfiddle.net/8fuEJ/. I'm using Google Chrome, if that makes a difference.

我有一个复选框:

<input type="checkbox" id="wtf">

我有一个 jquery 事件处理程序:

And I have a jquery event handler:

$('#wtf').click(function(ev) { alert(this.checked); });

到目前为止，一切都很好.当我单击复选框时，我首先看到复选标记出现，然后是警报true"(按此顺序).当我再次单击它时，我看到复选标记消失，然后警报false".

So far, so good. When I click the checkbox, I first see the checkmark appear, then the alert "true" (in that order). When I click it again, I see the checkmark disappear, then the alert "false".

当我以编程方式触发点击事件时，问题就来了.像这样:

The problem comes when I programmatically trigger the click event. Like this:

$('#wtf').click(function(ev) { alert(this.checked); });
$('#wtf').click();

在这种情况下，首先我看到警报false"(复选标记仍然不可见)，然后在解除警报后，复选标记出现.

In this case, first I see the alert "false" (with the checkmark still not visible), then after dismissing the alert, the checkmark appears.

为什么这里的顺序不同?

Why the difference in order here?

还要注意，如果我使用事件处理程序 change，它会按预期工作.

Also note that if I use the event handler change, it works as expected.

$('#wtf').change(function(ev) { alert(this.checked); });
$('#wtf').click();

在这里，我看到复选标记出现，然后警报true".

Here, I see the checkmark appear, then the alert "true".

推荐答案

这里发生了三种类型的操作:

There are three types of actions going on here:

1. 手动点击它会改变状态.这就是它自己所做的一切；然后触发器触发，因为它意识到它已被单击.这是脚本行为之前的浏览器行为问题.
2. 调用Click() 事件首先调用javascript 事件.jQuery 优先考虑您提供的功能，因为它很可能会取消该单击或执行一些其他操作.完成后，javascript 会更改复选框的状态.
3. 最后，Change() 事件通过告诉浏览器点击它来模仿手动点击.这意味着浏览器正在更改该项目，然后浏览器会调用您的触发事件.

1. Manually clicking it changes the state. That is all it does by itself; the trigger then fires because it is realizing that it has been clicked. This is a matter of browser behavior before scripting behavior.
2. Calling the Click() event calls the javascript event first. jQuery prioritizes the function you provided, as it may very well cancel that click or perform some other action. After that is completed, javascript changes the status of the checkbox.
3. Lastly the Change() event is mimicking the manual clicking by telling the browser to click it. That means that the item is being changed by the browser, which then in turn is calling your triggered event.

本质上的区别在于 Click() 是一个直接的 javascript 调用.它可以做其他人做不到的事情，比如取消更改和做各种其他的滑稽的事情，所以它会尽可能地延迟状态的变化.

Essentially the difference is that the Click() is a straight javascript call. It can do things the others cannot, such as cancel the change and do all sorts of other zany stuff, so it is delaying the change of state for as long as it can.

这篇关于在 jQuery 中，为什么以编程方式在复选框上触发 'click()' 不会立即检查它?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！