Tại sao tự động thay đổi hộp kiểm không kích hoạt sự kiện thay đổi biểu mẫu?

Question

Tôi đã viết đoạn mã javascript/jQuery này để thay đổi một hộp kiểm. http://jsfiddle.net/johnhoffman/crF93/

Javascript

$(function() { 
    $("a").click(function() { 
     if ($("input[type='checkbox']").attr('checked') == "checked") 
      $("input[type='checkbox']").removeAttr('checked'); 
     else 
      $("input[type='checkbox']").attr('checked', 'checked'); 
     return false; 
    }); 

    $("input[type='checkbox']").change(function(){ 
     console.log("Checkbox changed.");    
    });  
});​ 

HTML

<input type="checkbox" /> 
<a href="#">Change CheckBox</a>​ 

Điều thú vị là, nhấn vào liên kết làm thay đổi hộp văn bản, nhưng không kích hoạt sự kiện thay đổi hình thức mà các cuộc gọi chức năng mà các bản ghi một thông điệp trong Chrome Bảng điều khiển dành cho nhà phát triển web. Tại sao? Làm thế nào để tôi làm điều đó?

Answer 1

Bạn cần phải kích hoạt sự kiện thay đổi, .trigger('change'), vì vậy sự kiện đó đều biết rằng một sự thay đổi đã diễn ra.

Từ http://api.jquery.com/change/:

Mô tả: Bind một event handler để "thay đổi" sự kiện JavaScript, hoặc kích hoạt sự kiện trên một phần tử.

Phương pháp này là lối tắt cho .on("change", handler) trong hai biến thể đầu tiên và .trigger("change") ở thứ ba.

Sự kiện change được gửi đến một phần tử khi giá trị của nó thay đổi. Sự kiện này được giới hạn ở các thành phần <input>, <textarea> và <select> yếu tố. Đối với các hộp chọn, hộp kiểm và nút radio, sự kiện được kích hoạt ngay lập tức khi người dùng thực hiện lựa chọn bằng chuột, nhưng đối với các yếu tố khác, sự kiện được hoãn lại cho đến khi yếu tố mất tiêu điểm.

Demo:

http://jsfiddle.net/nPkPw/3/

Sử dụng chaining: http://jsfiddle.net/nPkPw/5/
tức $("input[type='checkbox']").trigger('change').attr('checked', 'checked');

Answer 2

Điều này không đáng ngạc nhiên, nhưng tôi đoán bạn có thể làm như vậy trong danh sách không có hiệu lực in the msdn.

• "Sự kiện này được kích hoạt khi nội dung được cam kết và không trong khi giá trị đang thay đổi".
• "Sự kiện trao đổi không kích hoạt khi tùy chọn đã chọn của đối tượng được chọn được thay đổi theo chương trình."

Bạn có thể luôn luôn chỉ .click() nó jsFiddle