Sự khác nhau giữa việc nhấp vào hộp kiểm và gọi hàm '.click()' của nó là gì?

Question

Cân nhắc the following code:

HTML:

<input type='checkbox' /> 
<div>Click here</div> 

JS:

$(function() { 
    $('input').click(function() { 
     document.write($(this).is(':checked') ? "checked" : "unckecked"); 
    }); 
    $('div').click(function() { 
     $('input').click(); 
    }); 
}); 

Khi hộp kiểm được nhấn vào, đầu ra là checked, nhưng nếu "Click here" được nhấp đầu ra là unckecked . Tại sao vậy?

Answer 1

Vì sự kiện click khác với sự kiện change, là nơi phần tử thay đổi. Khi <div> thực hiện .click() sẽ kích hoạt sự kiện click chưa thay đổi trạng thái của hộp kiểm để khi nó kiểm tra, nó ở trạng thái trước đó.

Khi bạn nhấp trực tiếp trên <input>, bạn đã thay đổi trạng thái, ngay cả khi các đám cháy change sự kiện thứ 2 theo thứ tự, các điểm chính là các hộp kiểm checked tình trạng đã thay đổi, trước handler click là kiểm tra, vì vậy trạng thái hiện tại.

Nếu bạn muốn thông tin trạng thái chính xác tìm kiếm và kích hoạt các sự kiện change thay vào đó, như thế này:

$(function() { 
    $('input').change(function() { 
     $("span").append("<br />" + (this.checked ? "Checked" : "Uncecked")); 
    }); 
    $('div').click(function() { 
     $('input').click().change(); 
    }); 
}); 

You can give it a try here, trên off-cơ hội này không phải là một câu hỏi về hành vi và bạn đang muốn một bên ngoài khu vực có thể nhấp, this is how I'd do it (thông qua một số <label> gói đầu vào).