当我在选择上使用向上或向下箭头时，为什么 jquery 更改事件不触发？

Question

我正在使用 jquery 和 livequery 插件监听选择下拉列表的更改事件。

$(".myDropdown").livequery("change", function () {
});

我注意到的一件事（我正在使用 Firefox）是，

当我选择焦点时，事件处理程序不会因点击向上和向下箭头而触发（向上和向下箭头确实会更改条目）

为什么更改事件不发生当我上下移动箭头键时触发，是否有建议或解决方法？

Answer 1

我想我会总结一下。

如果您单击选择框中的某个项目，则您正在更改它。如果您通过键入向下浏览选择框，则只有按 Enter 键、单击关闭或按 Tab 离开后才会选择该选择框。我认为这在不同的浏览器中略有不同，但本质上，选择发生在“我已完全完成此表单字段并立即离开”事件之类的事件上。

如果您希望结果更直接，您可以像这样触发更改事件：

$("select").live("keypress",function(){
    $(this).trigger("change");
});

如果您希望在所有表单字段上发生这种情况，请尝试此选择器：$(":input select textarea")

Answer 2

以下代码（无论如何在 Firefox 3.6 上）同意 OP 的观点，但不同意评论者的观点：

$('body').append('<select/>').find('select')
    .append('<option>one</option)')
    .append('<option>two</option>')
$('body').find('select').keypress(function() { 
    console.log('keypress: ' + $(this).val()); })

每当您按下箭头键时，更改的值都会打印到日志中。

Answer 3

即使您正在更改值（正如 Malvolio 所证明的那样），在元素失去焦点之前更改事件不会被触发。当按下任意键时，以下代码片段将手动触发更改事件：

$("select").on("keypress",function(){
    $(this).trigger("change");
});

Answer 4

如果马伏里奥说的是真的，那么应该可以

$(".myDropdown").livequery("change", function () {
   // your event handler
}).livequery("keypress", function() { 
   $(this).trigger("change");
});

http://jsfiddle.net/tW6Su/2/ 作为证明