jQuery .change() event is triggered with .click() in newer versions?

Question

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 fire when the .click() event is triggered. But when switching to 1.6, the .change() event is fired when .click() is triggered.

Two questions:

1. 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).

2. What is the proper way for me to bind a change() event and then trigger both a click() and change() 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?

Answer 1

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.

Answer 2

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.

Answer 3

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.)

Answer 4

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.