Chức năng bấm/thay đổi jQuery trên bộ nút radio

Question

Tôi có một nút radio được gọi là "pick_up_point". Có 3 tùy chọn và nhấp vào một tùy chọn sẽ hiển thị một tập hợp các trường nhập có liên quan đến tùy chọn.

Bây giờ theo mặc định khi người dùng nhấp vào một tùy chọn, tôi chạy hàm change() sẽ chạy hàm "clearInputFields" - như bạn có thể đoán sẽ xóa bất kỳ văn bản nào được nhập vào trường nhập.

$("input[name='pick_up_point']").change(function() 
{ 
clearInputFields(); 
}); 

Bây giờ tôi đã cố gắng mở rộng này để nhắc được hiển thị cho người dùng để cho họ biết rằng các lĩnh vực đầu vào sẽ bị xóa:

$("input[name='pick_up_point']").click(function(event) 
{ 
if(confirm('Address details will be cleared. Continue?')) 
{ 
    return true; 
} 
else 
{ 
    return false; 
} 
}); 

Các tiếng 'click' chức năng là trước ' thay đổi 'chức năng.

Công trình này "OK" trong Firefox và không hoạt động bình thường trong IE.

Trong Firefox, nút radio được chọn và lời nhắc được hiển thị và nhấp vào nút Hủy sẽ quay lại tùy chọn trước đó với tất cả các giá trị được giữ lại.

Trong IE, nút radio được chọn và lời nhắc được hiển thị nhưng các giá trị sẽ bị xóa. Nếu bạn nhấp vào Hủy thì không có nút radio nào được chọn.

Cách tôi muốn làm việc này là nếu bạn nhấp vào nút radio khác, bạn không nên chọn nó trừ khi bạn bấm OK trên lời nhắc. Nếu bạn bấm hủy bỏ các giá trị nên được giữ lại.

Answer 1

Trong IE, sự kiện change vào hộp kiểm và nút radio không cháy, ngay lập tức, nhưng chỉ sau khi lĩnh vực này đã được không tập trung. Theo cách này, nó hoạt động giống như các hộp nhập văn bản.

Khỉ jQuery về sự kiện change khá đáng kể, theo cách ẩn hành vi này khỏi bạn. Tuy nhiên nó không thể tái tạo chính xác hành vi của các trình duyệt khác trong IE, vì vậy trong một số trường hợp nó sẽ kích hoạt change để phản hồi tương tác với một phần tử ngay cả khi xử lý sự kiện khác click ngăn chặnDefault.

Một vấn đề khác: trong IE, nếu bạn return false từ nút radio, nút radio mới sẽ không được chọn, nhưng nút trước đó vẫn sẽ mất kiểm tra, không để bạn kiểm tra radio!

Vì vậy, bạn có thể phải thực hiện một số loại theo dõi trạng thái gây phiền nhiễu và đặt các nút radio trở lại trạng thái cũ khi xác nhận bị từ chối theo cách thủ công. ví dụ:

var currentradio= $("input[name='pick_up_point']:checked")[0]; 
$("input[name='pick_up_point']").change(function(event) { 
    var newradio= $("input[name='pick_up_point']:checked")[0]; 

    if (newradio===currentradio) 
     return; 
    if (confirm('Address details will be cleared. Continue?')) { 
     clearInputFields(); 
     currentradio= newradio; 
    } else { 
     currentradio.checked= true; 
    } 
}); 

Answer 2

Để đảm bảo rằng lựa chọn thực sự thay đổi, hãy đặt lệnh gọi hàm trong trình xử lý sự kiện .change và XÓA trình xử lý sự kiện .click.

$("input[name='pick_up_point']").change(function(event) 
{ 
if(confirm('Address details will be cleared. Continue?')) 
{ 
    clearInputFields(); 
    return true; 
} 
else 
{ 
    return false; 
} 
}); 

Không thực sự chắc chắn bạn cần câu trả lời xx nhưng tôi không biết phần còn lại của mã để tôi để chúng ở đó.

EDIT:

Để chứng minh tác dụng của các .change vs các .click (trên thay đổi thực tế) Tôi đã đặt cùng một bản demo nhỏ ở đây:

http://jsfiddle.net/KMjan/

Lưu ý các gia số truy cập và hiển thị ở phía dưới (không phải là ưa thích, nhưng thể hiện quan điểm)

EDIT2: Đã thêm một số dấu hiệu về việc gọi hàm rõ ràng trong các sự kiện cho .click và .change

http://jsfiddle.net/KMjan/1/

EDIT3: Thêm một cuộc biểu tình mà tôi đặt màu nền trên bong bóng sự kiện vào div cha mẹ để chứng minh ảnh hưởng của giá trị trả về (true và false) - chỉ cần nhấp vào nút radio tương tự nhiều lần, và thay đổi - sử dụng các câu trả lời tiêu cực và tích cực để xem kết quả của mỗi lựa chọn.

http://jsfiddle.net/KMjan/3/

Những thể hiện nhu cầu sử dụng phương pháp propogation sự kiện mà bạn có thể muốn điều tra nếu ảnh hưởng không có như mong muốn.
Xem trang này để biết chi tiết về sự kiện propogation: http://api.jquery.com/category/events/