Quelle est la différence entre cliquer sur une case à cocher et appeler sa fonction '.click()'?

Question

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

Lorsque la case est cliqué, la sortie est checked, mais si "Cliquez ici" est cliquée la sortie est unckecked . Pourquoi donc?

Answer 1

Parce que l'événement click est différent de l'événement change, où l'élément change. Lorsque le <div>.click() déclenche l'événement click qui n'a pas encore changé l'état de la case à cocher alors quand il le vérifie, il est dans l'état précédent.

Lorsque vous cliquez sur directement sur le <input>, vous avez déjà changé l'état, même si la 2ème commande événement se déclenche change, le point principal est les cases checked statut a changé, avant le gestionnaire click est vérifier pour cela, donc l'état est actuel.

Si vous voulez des informations d'état précis chercher et déclencher l'événement change au lieu, comme ceci:

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

You can give it a try here, sur tout hasard ce n'est pas une question de comportement et vous êtes désireux d'un externe zone cliquable, this is how I'd do it (via un <label> enveloppant l'entrée).