Question

我在HTML表单上有一个简单的Listbox和这个非常基本的jQuery代码

    //Toggle visibility of selected item
    $("#selCategory").change(function() {
        $(".prashQs").addClass("hide");
        var cat = $("#selCategory :selected").attr("id");
        cat = cat.substr(1);
        $("#d" + cat).removeClass("hide");
    });

当使用鼠标选择当前项目时，更改事件会激活，但是当我使用键盘滚动项目时，事件不会被触发，我的代码也不会执行。

这种行为有原因吗？什么是解决方法？

Answer 1

在元素失去焦点之前，通常不会触发onchange事件。您还需要使用onkeypress。也许是这样的：

var changeHandler = function() {
    $(".prashQs").addClass("hide");
    var cat = $("#selCategory :selected").attr("id");
    cat = cat.substr(1);
    $("#d" + cat).removeClass("hide");
}

$("#selCategory").change(changeHandler).keypress(changeHandler);

您希望onchange和onkeypress分别考虑鼠标和键盘交互。

Answer 2

有时，每个浏览器的更改行为可能会有所不同，因为您可以执行以下操作：

 //Toggle visibility of selected item
    $("#selCategory").change(function() {
        $(".prashQs").addClass("hide");
        var cat = $("#selCategory :selected").attr("id");
        cat = cat.substr(1);
        $("#d" + cat).removeClass("hide");
    }).keypress(function() { $(this).change(); });

您可以链接所需的任何事件并手动触发更改事件。

IE：

var changeMethod = function() { $(this).change(); };
....keypress(changeMethod).click(changeMethod).xxx(changeMethod);

Answer 3

您描述的行为，即在select元素中通过键盘滚动触发的更改事件，实际上是Internet Explorer错误。 DOM Level 2 Event规范将change事件定义为：

控件发生更改事件失去输入焦点及其值自获得关注以来已被修改。此事件对INPUT，SELECT，和TEXTAREA。元件。

如果你真的想要这种行为，我认为你应该看一下键盘事件。

$("#selCategory").keypress(function (e) { 
  var keyCode = e.keyCode || e.which; 
  if (keyCode == 38 || keyCode == 40) { // if up or down key is pressed
     $(this).change(); // trigger the change event
  } 
});

检查示例here ...

Answer 4

我在JQuery 1.4.1下遇到了IE的问题 - 如果使用键盘进行更改，组合框上的更改事件没有触发。

似乎已在JQuery 1.4.2中修复。

Answer 5

$('#item').live('change keypress', function() { /* code */ });

键盘滚动时不触发Jquery列表框更改事件

5 个答案: