问题 在jQuery中,为什么以编程方式触发复选框上的“click()”而不是立即检查它?


更新:这仅适用于jQuery 1.8及更低版本。这是 在jQuery 1.9中修复

这是我的最小jsfiddle示例: http://jsfiddle.net/8fuEJ/。我正在使用谷歌浏览器,如果这有所作为。

我有一个复选框:

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

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

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

到现在为止还挺好。当我单击复选框时,我首先看到复选标记出现,然后是警告“true”(按此顺序)。当我再次点击它时,我看到复选标记消失,然后警告“false”。

当我以编程方式触发click事件时出现问题。喜欢这个:

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

在这种情况下,首先我看到警告“false”(复选标记仍然不可见), 然后 取消警报后,将出现复选标记。

为什么这里的顺序不同?

另请注意,如果我使用事件处理程序 change,它按预期工作。

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

在这里,我看到复选标记出现,然后是警告“true”。


4212
2017-10-06 17:22


起源



答案:


这里有三种类型的操作:

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

基本上差异在于 Click() 是一个简单的JavaScript调用。它可以做其他人不能做的事情,比如取消改变和做各种其他的东西,所以只要它可以延迟状态的改变。


12
2017-10-06 18:22



凉。现在它是有道理的。 - Ben Lee


答案:


这里有三种类型的操作:

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

基本上差异在于 Click() 是一个简单的JavaScript调用。它可以做其他人不能做的事情,比如取消改变和做各种其他的东西,所以只要它可以延迟状态的改变。


12
2017-10-06 18:22



凉。现在它是有道理的。 - Ben Lee


click事件在默认操作之前触发。这样做是为了通过从处理程序返回false来防止发生默认操作。

在您的示例中,这意味着您警告旧值,因为尚未发生更改复选框状态的默认操作。


4
2017-10-06 17:25



...通过从处理程序返回false 或者在事件对象上调用.preventDefault() - Gareth
我知道默认操作和 preventDefault,但这不回答我的问题。我询问了顺序的区别。为什么先点击它手动检查它,然后运行我的事件处理程序,而调用 click 以编程方式首先调用我的事件处理程序,然后检查它? - Ben Lee
看看我的意思,如果我扔进去 ev.preventDefault() 进入事件处理程序时,我检查它时仍会发出“true”警告。在这种情况下,我会看到复选标记出现,然后警告“true”,然后复选标记消失。看到: jsfiddle.net/csPzu - Ben Lee
换句话说,在您说“在您的示例中,这意味着您警告旧值,因为尚未发生更改复选框状态的默认操作。”,这仅适用于程序化案例。对于手动案例,我正在警告 新 值。为什么? - Ben Lee