Tôi làm cách nào để hiểu hành vi hộp kiểm này?

Question

Đây là HTML của tôi:

<input class='user_roles' id="chk" type=checkbox />
<input id="btn_on" type="button" value="on" />
<input id="btn_off" type="button" value="off" />

Và jQuery tôi:

$('#chk').click(function() { 
    if($(this).prop("checked") === true) { 
     alert ("checked"); 
    } 
    else{ 
     alert ("not checked"); 
    } 
}); 

$("[id$=btn_on]").click(function() { 
    $('#chk').click(); 
}); 

$("[id$=btn_off]").click(function() { 
    $('#chk').click(); 
}); 

Một ví dụ làm việc là here.

Khi hộp kiểm được nhấp bằng chuột, nó sẽ được kiểm tra ngay - tức là cảnh báo sẽ hiển thị "đã chọn". Tuy nhiên, khi một trong các nút được nhấp, gián tiếp gọi phương thức nhấp vào hộp kiểm, hộp kiểm không được nhấp cho đến khi sau mã nhấp chuột đã được chạy.

Để kiểm tra điều này, hãy nhấp vào hộp kiểm một vài lần bằng chuột và bạn sẽ thấy các cảnh báo "được chọn" và "không được chọn" tương ứng. Nhấp vào "Bật" và bạn sẽ thấy cảnh báo "không được chọn" và sau đó hộp kiểm sẽ được chọn. Nếu sau đó bạn nhấp vào "Tắt", bạn sẽ thấy "đã chọn", sau đó bỏ chọn hộp kiểm.

Lý do của hành vi này là gì? Làm cách nào để đảm bảo rằng hộp kiểm "kiểm tra" xảy ra trước khi mã trình nghe nhấp chuột được gọi, theo hành vi của chuột?

Answer 1

nếu nó chỉ là một câu hỏi về việc nó hoạt động, sử dụng .change() thay vì .click() vào hộp kiểm của bạn, nếu nó về việc tại sao nó làm những gì nó làm tôi không có ý tưởng xin lỗi

Answer 2

Hãy thử sử dụng setTimeout sẽ đợi một chút và sau đó kiểm tra. Vấn đề là kích hoạt sự kiện thậm chí nhanh hơn hộp kiểm được chuyển sang vì lý do không xác định.

Working fiddle

$('#chk').click(function() { 
    var $this = $(this); 
    setTimeout(function() { 
     if ($this.prop("checked") === true) { 
      alert("checked"); 
     } 
     else { 
      alert("not checked"); 
     } 
    }, 10); 
}); 

$("[id$=btn_on]").click(function() { 
    $('#chk').click(); 
}); 

$("[id$=btn_off]").click(function() { 
    $('#chk').click(); 
}); 

Answer 3

Tôi tìm thấy điều này answer on Stack Overflow mà tạo ra một sự kiện thủ công và gửi nó.

Bạn có thể đặt nó vào một hàm và gọi nó là từ các sự kiện nhấp chuột của bạn:

function simulateClick(target) 
{ 
    var e = document.createEvent('MouseEvents'); 
    e.initEvent('click', true, true); 
    target.dispatchEvent(e); 
} 

$("[id$=btn_on]").bind("click", function() { 
    simulateClick($('#chk')[0]); 
}); 

$("[id$=btn_off]").click(function() { 
    simulateClick($('#chk')[0]); 
}); 

Hãy thử nó ở đây: http://jsfiddle.net/FCrSg/10/

Gần giống như những gì bạn muốn trên MDN: https://developer.mozilla.org/en/DOM/dispatchEvent_example

Answer 4

Bạn có thể làm:

function alertState(el){ 
    if(el.prop("checked") === true) { 
     alert ("checked"); 
    } 
    else{ 
     alert ("not checked"); 
    } 
} 
$('#chk').click(function() { 
    alertState($(this)); 
}); 
    $("[id$=btn_on]").click(function() { 
     $('#chk').prop('checked', true); 
     alertState($('#chk')); 
    }); 

    $("[id$=btn_off]").click(function() { 
      $('#chk').removeProp('checked'); 
     alertState($('#chk')); 
    }); 

fiddle đây http://jsfiddle.net/FCrSg/9/

Answer 5

Sử dụng các sự kiện onchange thay vì onclick:

http://jsfiddle.net/FCrSg/8/

Sự kiện onclick được kích hoạt khi hộp được nhấp TRƯỚC giá trị của hộp được thay đổi.

Các công việc là như thế này: bạn click vào bạn di chuột => sự kiện OnClick là bắn => hộp kiểm được đánh dấu => OnChange sự kiện là bắn

Answer 6

Thể chất cách nhấp vào hộp kiểm gây nó đã được kiểm tra trước khi sự kiện nhấp chuột được kích hoạt.Sử dụng jquery để nhấp vào nó chạy mã sự kiện đầu tiên. Thay vào đó, sử dụng sự kiện thay đổi sẽ cho bạn kết quả mong muốn.

Xem ví dụ hoạt động bên dưới.

http://jsfiddle.net/FCrSg/3/

Answer 7

Dường như với tôi những lời giải thích rằng đây là một lỗi trong cách trình duyệt xử nhấp chuột vào hộp kiểm sau:

Hành vi mặc định nên diễn ra sau xử lý sự kiện tùy chỉnh được gọi là . Vì vậy, những gì bạn thấy khi bạn nhấp vào các nút thực sự là hành vi chính xác. Hành vi vui nhộn là khi bạn nhấp vào hộp nó được kiểm tra trước khi trình xử lý sự kiện tùy chỉnh được chạy.

Để xem mức độ lạ, bạn có thể return false; từ trình xử lý sự kiện. Điều này được cho là để ngăn chặn các hành vi mặc định. Những gì bạn sẽ thấy là hộp thực sự được kiểm tra khi bạn nhấp vào nó - và sau đó bỏ chọn khi trình xử lý sự kiện trả về!

Nhân tiện, tôi đang sử dụng Firefox 4. Tôi không biết nó giống như thế nào trong các trình duyệt khác. Dường như không liên quan đến jQuery, vì tôi có thể thấy cùng một hành vi hài hước khi làm mọi thứ mà không có nó.