jQuery .change() 事件在较新版本中由 .click() 触发？

Question

我目前正在升级我的应用程序以使用 jQuery 1.6.1（以前使用 1.4.4）并发现现在 .click() 事件也会自动触发 .change() 事件。

我在这里创建了一个简单的例子：http://jsfiddle.net/wDKPN/

请注意，如果您包含 1.4.4，.change() 函数将在触发 .click() 事件时不会触发。但是当切换到 1.6 时，.change() 事件会在.click() 被触发时触发。

两个问题：

1. 这是一个错误吗？似乎以编程方式触发.click()不应该也触发其他事件（例如，似乎也错误自动触发.blur() 和.focus()，以帮助“模仿”用户的点击）。

2. 我绑定change() 事件的正确方法是什么然后触发两个该元素的click() 和change() 事件？我是否只是调用.click()，并依赖.change() 也会触发这一事实？

   $('#myelement').change(function() {
        // do some stuff
   });
   
   $('#myelement').click(); // both click and change will fire, yay!
   

在我的旧代码中，我使用这种模式在 ajax 调用后初始化一些复选框（以及它们的选中状态和值）：

    $('#myelement').change(function() {
         // do some stuff including ajax work
    }).click().change();

但在 1.6.1 中，我的逻辑触发了两次（一次用于.click()，一次用于.change()）。我是否可以仅依靠删除 .change() 触发器并希望 jQuery 在未来版本中继续以这种方式运行？

Answer 1

最好的方法是：

$('#myelement').bind('initCheckboxes change', function() {
     // do some stuff including ajax work
}).trigger('initCheckboxes');

要执行初始化工作，您只需将自定义事件绑定到它，您会在页面第一次加载时触发它。这一点，没有人会在任何版本上夺走你。

而我相信，change 事件将继续存在于所有版本中，因为它已经存在了很长时间，而且它只是以这种方式运作良好。

最后，这是一个美好的结局，因为自定义事件 initCheckboxes 只会在页面加载时触发一次，而 change 事件将始终监听并在更改状态时触发。

Answer 2

我会说这是 jQuery 1.4.4 中的一个错误。删除 jQuery 事件处理程序并使用标准 addEventListener 会产生与 jquery 1.6.1 相同的结果。

http://jsfiddle.net/jruddell/wDKPN/26/

window.count = 0;

document.getElementById('mycheckbox').addEventListener('change', function() {
    window.count++;
    jQuery('#output').append('I fired: ' + window.count + ' times<br />');
});

document.getElementById('mycheckbox').click();

我还会使用triggerHandler 专门调用一个jQuery 事件处理程序。如果您希望事件模型确定要调用哪些处理程序，请使用click、change 等。

Answer 3

忘记复选框的单击事件。 change 事件处理一切。

$('#myelement').change(function() {
    // do some stuff
});
$('#myelement').trigger('change');

自己看看：http://jsfiddle.net/zupa/UcwdT/ （此演示设置为 jQuery 1.8，但也适用于 1.6。）

Answer 4

我认为您可以通过将 change() 放在点击处理程序中然后触发点击来使其适用于 jQuery 1.4.4 和 1.6 实现。

$('.myelement').click(function(){
 $('.myelement').change();   
 alert($(this).val());
});
$('.myelement').trigger('click');

看看there的简单例子。