kiện Jquery Listbox Thay đổi không cháy trên bàn phím di chuyển

Question

Tôi đã có một Listbox đơn giản trên một hình thức HTML và mã này jQuery rất cơ bản

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

Các sự kiện thay đổi bắn tốt khi mục hiện hành được chọn bằng cách sử dụng Chuột, nhưng khi tôi di chuyển qua các mục bằng bàn phím, sự kiện không được kích hoạt và mã của tôi không bao giờ thực hiện.

Có lý do nào cho hành vi này không? Và cách giải quyết khác là gì?

Answer 1

Sự kiện onchange không thường bắn cho đến khi nguyên tố này mất tập trung. Bạn cũng sẽ muốn sử dụng onkeypress. Có lẽ cái gì đó như:

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

Bạn sẽ muốn cả onchange và onkeypress để giải thích cho cả chuột và bàn phím tương tác tương ứng.

Answer 2

Đôi khi các hành vi thay đổi có thể khác nhau cho mỗi trình duyệt, như một cách giải quyết bạn có thể làm một cái gì đó như thế này:

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

Bạn có thể chuỗi bất cứ sự kiện mà bạn muốn và tự bắn sự kiện thay đổi.

IE:

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

Answer 3

Các hành vi bạn mô tả, sự kiện thay đổi gây ra bởi bàn phím di chuyển trong một yếu tố lựa chọn, thực sự là một lỗi trình duyệt Internet Explorer. Các đặc điểm kỹ thuật DOM Level 2 Event định nghĩa sự kiện change như thế này:

kiện

Sự thay đổi xảy ra khi một điều khiển mất tập trung đầu vào và giá trị của nó đã được sửa đổi kể từ khi đạt được trọng tâm. Sự kiện này hợp lệ cho INPUT, SELECT, và TEXTAREA. thành phần.

Nếu bạn thực sự muốn hành vi này, tôi nghĩ bạn nên xem xét các sự kiện bàn phím.

$("#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 
    } 
}); 

Kiểm tra một ví dụ here ...

Answer 4

Tôi gặp sự cố này với IE trong JQuery 1.4.1 - sự kiện thay đổi trên hộp tổ hợp không được kích hoạt nếu bàn phím được sử dụng để thực hiện thay đổi.

Dường như đã được sửa trong JQuery 1.4.2.

Answer 5

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