Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at the jQuery Conference 2011 (Cambridge, MA) with:

jQuery's Event Triggering, Order Of Default Behavior, And triggerHandler()

By Ben Nadel on

I ran into a strange, rather undesirable behavior this morning when dealing with jQuery's manual event triggering. It seems that when you trigger the click event on a checkbox, the default behavior (toggling the checked attribute) takes place after event handlers fire. This is opposite of what happens when the browser naturally handles the checkbox click event - the checked attribute is toggled and then the event handlers are executed.

This difference in the order of operations between inherent clicking and jQuery's event triggering can cause a big problem if the event handler depends on the status of checkbox in anyway (which, if you have a click handler on a checkbox to begin with means it probably does).

To see this in action, take a look at this simple code:

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • <html>
  • <head>
  • <title>jQuery Trigger and Default Behavior Demo</title>
  •  
  • <script type="text/javascript" src="jquery-1.3.2.js"></script>
  • <script type="text/javascript">
  •  
  • // When the DOM is ready, initialize.
  • $(
  • function(){
  •  
  • $( "input" ).click(
  • function( objEvent ){
  •  
  • // Alert the checkboxed status.
  • alert( this.checked );
  •  
  • }
  • );
  •  
  •  
  • $( "button" ).click(
  • function( objEvent ){
  •  
  • // Trigger click on the checkbox.
  • $( "input" ).click();
  •  
  • }
  • );
  •  
  • }
  • );
  •  
  • </script>
  • </head>
  • <body>
  •  
  • <h1>
  • jQuery Trigger and Default Behavior Demo
  • </h1>
  •  
  • <form>
  • <input type="checkbox" />
  • <button>click checkbox</button>
  • </form>
  •  
  • </body>
  • </html>

If I refresh this above code and click on the checkbox directly, it alerts:

true

... because the checkbox's checked attribute is toggled before the click handler executes. If, however, I refresh the page (hard refresh to reset form) and click on the button to manually trigger the click handler on the checkbox, it alerts:

false

This is because the manually triggered event handlers fire before the default behavior takes place.

To get around this, I had to manually change the checkbox and then trigger ONLY the event handlers:

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • <html>
  • <head>
  • <title>jQuery Trigger and Default Behavior Demo</title>
  •  
  • <script type="text/javascript" src="jquery-1.3.2.js"></script>
  • <script type="text/javascript">
  •  
  • // When the DOM is ready, initialize.
  • $(
  • function(){
  •  
  • $( "input" ).click(
  • function( objEvent ){
  •  
  • // Alert the checkboxed status.
  • alert( this.checked );
  •  
  • }
  • );
  •  
  •  
  • $( "button" ).click(
  • function( objEvent ){
  •  
  • // Toggle checkbox checked status.
  • $( "input" )[ 0 ].checked = !$( "input" )[ 0 ].checked;
  •  
  • // Trigger ONLY click event hanlders on the checkbox.
  • $( "input" ).triggerHandler( "click" );
  •  
  • }
  • );
  •  
  • }
  • );
  •  
  • </script>
  • </head>
  • <body>
  •  
  • <h1>
  • jQuery Trigger and Default Behavior Demo
  • </h1>
  •  
  • <form>
  • <input type="checkbox" />
  • <button>click checkbox</button>
  • </form>
  •  
  • </body>
  • </html>

jQuery's triggerHandler() method allows us to trigger the jQuery-bound event handlers without triggering the default behavior of the browser (toggle checked status). In doing so, the click handler on the checkbox itself can now function uniformly no matter how it is triggered.

I love jQuery event binding and triggering; I think this is the only place where this anomaly will actually matter as this is the only event type that I can think of that has to change the DOM before it executes its handlers.




Reader Comments

Hi,

Thanks I think that's exactly what I need. I guess nobody is aware of a jQuery plugin solution to this problem so far?

Reply to this Comment

Hi,

Thanks for sharing this precious information, I was banging my head against the wall to solve this nagging problem. I think that's exactly what I needed.

Thanks once again!

Mohammed.

Reply to this Comment

another way:

$(document).ready(function(e){
$("body").append("<input type='checkbox'/>");

$(":checkbox").click(function(e){
this.checked=!this.checked;
}).click(function(e){
alert(this.checked);
}).click(function(e){
this.checked=!this.checked;
});

$("body").append("<input type='button' value='toggle'/>");
$(":button").click(function(e){
$(":checkbox").click();
});
});

Reply to this Comment

Exactly the information I was looking for.

Toggling the checked state, then using triggerHandler() worked perfectly.

Thanks for this.

Reply to this Comment

Thank you for clarification of this weird behavior.

However, since my case is using radio button and can't use yours approach (having to uncheck all other radio, not just toggle "checked" status)

=======================================

For folks who came across same problem. try this

$("yours_selector").each(function(){this.click()});

or

$("yours_selector")[0].click();

---------------------------------------------------------------------

it's click function as in "mouseclick in browser" and will behave as you would expected

=======================================

Reply to this Comment

@WallSky,

If you want to check the radio button, you can also just check it explicitly if you want:

$("yours_selector").attr( "checked", "true" );

... that should work for all of them. Of course, you lose the ability to perform additional logic in thee iteration.

You can also reach back into the raw DOM element:

$("yours_selector").each(function(){
this.checked = true;
});

Just presenting options (not saying any of them is any better). All depends on what you want to do.

Reply to this Comment

Has anyone else tried this under firefox? firefox resets the checkbox to false after the message box, IE works fine.

Great Article!

Reply to this Comment

Tks! You saved-me today.

it can be chained into one statement:

$("#x).attr("checked","checked").triggerHandler('click');

Reply to this Comment

I was fighting the same problem but found a (simpler) solution that seems to work the same. I have tested in Firefox 3 and IE8.

Instead of firing the click() function on the jQuery object by using $(element).click(), I use the javascript native click() trigger on the DOM object: element.click().

This does toggle the checkbox state before running the click event handler.

Reply to this Comment

@Ben -- thanks, I just ran into this as well, and this saved me from banging my head against the wall.

Funny that they haven't addressed this officially yet, though I haven't checked to see if this issue is in their trac...

@Bart -- interesting...I'll try your suggestion as well

Reply to this Comment

@Greg,

I go back and forth as to whether this should be considered a bug. In general, I try to shy away from mimicking a user-behavior that is to be generated by the UI.

Reply to this Comment

Yes, thanks for writing this up! I combined tips, and changed this code which suffers from the problem:

  • $( '.checkbox-class' ).click();

to this, which doesn't:

  • $( '.checkbox-class' ).each( function() { this.click(); } );

Reply to this Comment

Two sets of thanks to hand out!

Thanks to Ben for being on page 1 when I was Googling this problem, and thanks to Bart for the native JS suggestion.

While both solutions work I think defaulting to a native JS click is cleaner than messing about with manually switching checked status.

Thanks again.

Reply to this Comment

will anyone help to solve this solution..

My button in the page contains two event click functions. Defaultly first event is execting first and the second one continues..

But i need to fire the second function first before the first one

Reply to this Comment

Thanks!

I had to spend lot of hours trying to figure out different solutions but I ended frustated because I unknown the root of the problem in the first place.

Your explanation help me a lot and save my day :D

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.