I'm currently upgrading my application to use jQuery 1.6.1 (previously using 1.4.4) and found that now the .click()
event automatically triggers a .change()
event as well.
I created a simple example here: http://jsfiddle.net/wDKPN/
Notice if you include 1.4.4 the .change()
function will not fi开发者_如何学编程re when the .click()
event is triggered. But when switching to 1.6, the .change()
event is fired when .click()
is triggered.
Two questions:
Is this a bug? It seems that programmatically triggering
.click()
shouldn't also fire other events (for example, it would seem wrong to also automatically fire.blur()
and.focus()
, to help "mimic" a user's click).What is the proper way for me to bind a
change()
event and then trigger both aclick()
andchange()
event for that element? Do I simply call.click()
, and rely on the fact that.change()
will also fire?$('#myelement').change(function() { // do some stuff }); $('#myelement').click(); // both click and change will fire, yay!
In my old code I'm using this pattern to initialize some checkboxes (and their checked states and values) after an ajax call:
$('#myelement').change(function() {
// do some stuff including ajax work
}).click().change();
But in 1.6.1 my logic fires twice (once for .click()
and once for .change()
). Can I rely on just removing the .change()
trigger and hope that jQuery continues to behave this way in future versions?
Best way to do this is:
$('#myelement').bind('initCheckboxes change', function() {
// do some stuff including ajax work
}).trigger('initCheckboxes');
To do your initialization stuff you just bind to it a custom event, which you trigger it the first time the page loads. This, no one will take away from you on any versions.
Whereas change
event, I believe, will continue to be there on all versions, because it has been for so long, and it just works nicely that way.
In the end, this is a happy ending story, because the custom event initCheckboxes
will fire just once on page load and change
event will always listen and fire on change state.
I would say this was a bug in jQuery 1.4.4. Removing the jQuery event handlers and using standard addEventListener
produces the same result as jquery 1.6.1.
http://jsfiddle.net/jruddell/wDKPN/26/
window.count = 0;
document.getElementById('mycheckbox').addEventListener('change', function() {
window.count++;
jQuery('#output').append('I fired: ' + window.count + ' times<br />');
});
document.getElementById('mycheckbox').click();
Also I would use triggerHandler
to specifically invoke a jQuery event handler. If you want the event model to determine which handlers to call, then use click
, change
etc.
Forget about the click event for checkboxes. The change event handles everything.
$('#myelement').change(function() {
// do some stuff
});
$('#myelement').trigger('change');
See for yourself: http://jsfiddle.net/zupa/UcwdT/ (This demo is set to jQuery 1.8 but works in 1.6 as well.)
I think you can make it work for both jQuery 1.4.4 and 1.6 implementations by putting change() within click handler and then triggering the click.
$('.myelement').click(function(){
$('.myelement').change();
alert($(this).val());
});
$('.myelement').trigger('click');
Have a look there for simple example.
精彩评论