Thay đổi sự kiện không bắn khi nút radio được chọn với bàn phím

Question

<script> 
$("input[name='my_radio_button']").change(function(){ 
    if ($("input[@name='my_radio_button']:checked").val() == 'ONE'){ 
       do_this_stuff(); 
    } else { do_other_stuff(); } 
}); 
</script> 

<input type="radio" name="my_radio_button1" id="radio1" value="ONE" checked /> 
<input type="radio" name="my_radio_button2" id="radio2" value="TWO" /> 

(giả nhúng HTML hoàn hảo và kịch bản bắn khi tất cả đã sẵn sàng)

Các sự kiện thay đổi dường như bắn khi nhấp chuột để chọn một tùy chọn radio, nhưng không khi lựa chọn được thay đổi bằng bàn phím. Bất cứ điều gì có thể được thực hiện về điều này?

chỉnh sửa - không có sự khác biệt nếu tôi sử dụng bind hoặc live - đây có phải là lỗi không?

Để làm rõ, sự kiện không kích hoạt ngay cả sau khi tiêu điểm bị mất.

chỉnh sửa 2 - không ai biết lý do cho điều này?

chỉnh sửa 3 - như DonaldIsFreak chỉ ra điều này dường như là một vấn đề chrome

Answer 1

đây là một sửa chữa đáng tin cậy http://evilstreak.co.uk/blog/fixing-change-events-on-radios

Và sử dụng nó đây là cách bạn sẽ thực hiện nó với ví dụ của bạn: Và đây là một demo của mã dưới đây http://www.jsfiddle.net/uDkdJ/1/ tôi thử nghiệm bản demo này trong FF3.6, IE8, Safari5 , Chrome7 và Opera10.65

$.fn.fix_radios = function() { 
    function focus() { 
    if (!this.checked) return; 
    if (!this.was_checked) { 
     $(this).change(); 
    } 
    } 

    function change(e) { 
    if (this.was_checked) { 
     e.stopImmediatePropagation(); 
     return; 
    } 
    $("input[name=" + this.name + "]").each(function() { 
     this.was_checked = this.checked; 
    }); 
    } 
    return this.focus(focus).change(change); 
} 

$(function() { 
    $("input[type=radio]").fix_radios(); 
    $("input[name='my_radio_button']").change(function(){ 
    if ($("input[@name='my_radio_button']:checked").val() == 'ONE'){ 
     do_this_stuff(); 
    } else { do_other_stuff(); } 
    }); 
}); 

Answer 2

Thật không may, nút radio không cháy, sự kiện thay đổi khi thay đổi với bàn phím, cho đến khi bạn mất tập trung.

Nếu bạn muốn khắc phục sự cố này, bạn luôn có thể thiết lập bộ hẹn giờ theo dõi trạng thái và gửi một sự kiện khi nó thay đổi. Giống như (giả):

var monitorRadio = function(radio) 
{ 
    var state = $("input[@name='']:checked").val(); 
    $(radio).data("state", state); 
    var func = function() 
    { 
    var state = $("input[@name='']:checked").val(); 
    if (state != $(radio).data("state")) 
    { 
     $(radio).data("state", state); 
     // dispatch the change event 
     $(radio).change(); 
    } 
    setTimeout(100, func()); 
    }; 


    func(); 
} 

Answer 3

Tôi không có nhiều may mắn nhận được nút radio để thay đổi nó là nhà nước với các phím mũi tên trong jsfiddle của tôi, vì vậy đây là một câu trả lời mù:

Sử dụng .keypress() Cùng cai trị về việc không thay đổi cho đến khi mất tập trung áp dụng để chọn hộp, và tôi đã sử dụng thành công .keypress() có

http://api.jquery.com/keypress/

Answer 4

$("input[name='my_radio_button']").bind('change keypress', function(){ 
    if ($("input[@name='my_radio_button']:checked").val() == 'ONE'){ 
    do_this_stuff(); 
    } else { do_other_stuff(); } 
}); 

Vấn đề với phương pháp này là sự kiện sẽ kích hoạt một lần khi người dùng nhấn một phím và một lần nữa khi nó mất tiêu điểm. Tôi không chắc chắn những gì do_this_stuff() và do_other_stuff() làm, nhưng nếu họ bắn nhiều hơn một lần là một vấn đề, bạn có thể sửa lỗi này với một var để kiểm tra những gì giá trị trước đó là, để bạn biết nếu nó thực sự đã thay đổi:

$("input[name='my_radio_button']").bind('change keypress', function(){ 
    if ($(this).value() != prevValue) { 
    if ($("input[@name='my_radio_button']:checked").val() == 'ONE'){ 
     do_this_stuff(); 
    } else { do_other_stuff(); } 
    } 
    prevValue = $(this).value(); 
}); 

Answer 5

Trong bộ chọn jquery 1.4.2 @ không hoạt động. Hãy xem ví dụ này để xem nó có hữu ích cho bạn hay không, thay đổi sự kiện "thay đổi" cho mỗi "bấm".

html

<input type="radio" name="rdio" value="a" checked="checked" /> 
<input type="radio" name="rdio" value="b" /> 
<input type="radio" name="rdio" value="c" /> 

<br /> 

<div id="test"></div> 

javascript:

$("input[name='rdio']").click(function(){ 
    if ($("input[name='rdio']:checked").val() == 'a') 
     $("#test").append("<div>a</div>"); 
    else if ($("input[name='rdio']:checked").val() == 'b') 
     $("#test").append("<div>b</div>"); 
    else 
     $("#test").append("<div>c</div>"); 
}); 

example
ref 1
ref 2