Qual è la differenza tra fare clic su una casella di controllo e chiamare la sua funzione '.click()'?

Question

Considerare 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(); 
    }); 
}); 

Quando la casella di controllo viene cliccato, l'uscita è checked, ma se "clicca qui" si fa clic l'uscita è unckecked . Perché?

Answer 1

Perché l'evento click è diverso dall'evento change, che è dove l'elemento cambia. Quando il <div> fa un .click() è attiva l'evento click che non ha ancora cambiato lo stato della casella di controllo in modo da quando lo controlla, è nello stato precedente.

Quando si fa clic direttamente sul <input>, hai già cambiato lo stato, anche se il 2 ° incendi change evento in ordine, il punto principale è le caselle checked stato è cambiato, prima di il gestore click è controllando per questo, quindi lo stato è attuale.

Se volete informazioni di stato accurate cercare e attivare l'evento change invece, in questo modo:

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

You can give it a try here, sulla remota possibilità questa non è una domanda comportamento e hai intenzione di un esterno area selezionabile, this is how I'd do it (tramite un <label> avvolgendo l'ingresso).