鍵盤滾動時不觸發Jquery列表框更改事件

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
  } 
}); 

點擊此處查看示例...

Answer 4

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

Answer 5

我在JQuery 1.4.1下遇到了IE的這個問題 - 如果鍵盤用於進行更改，則組合框上的更改事件不會觸發。

似乎已在JQuery 1.4.2中修復。