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

Posted March 12, 2009 at 10:20 AM by Ben Nadel

Tags: Javascript / DHTML

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?

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.

@Mohammed,

Glad to help out :)

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

sorry,it seems not work correctly when actually click the checkbox.

Exactly the information I was looking for.

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

Thanks for this.

@llade,

No worries my man. It's a weird situation.

@Jeff,

Glad to help out.

Thanks Ben, exactly the explanation I was looking for -- and not the first time you've helped me out here.

@John,

Sweeeet. Always glad to help out.

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

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

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

thanks for the tip! I run into the same problem.

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

Great Article!

Tks! You saved-me today.

it can be chained into one statement:

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

@Alex,

The beauty of jQuery method chaining.

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.

@Bart,

Ahh, good to know, thanks.

This just saved me. Thanks for the write up!

@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

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

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

to this, which doesn't:

What happens if you use the Change event instead of Click? Eg:

$( "button" ).change(

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.

Thanks for the article. This provided a solution to a frustrating problem. Used triggerHandler() and all is well.

Thanks again!

Pheiw! I am thankful I found this page. I think jquery should rectify this - but thanks for the solution:

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

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

Thx from Mauritius.

Post A Comment

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.

Please review the following issues:

Author Name:
Author Email:
Author Website:
Comment:	Supported HTML tags for formatting: <strong>bold</strong>   <em>italic</em>   <code>code</code>
	Remember my information
	Subscribe to comments
	Send me a copy of this comment