jQuery click event when triggered programatically

Question

I have a link with an inline onclick event:

<a href="#" onclick="somefunction();">click</a>

I registered an additional function on the onclick event:

jQuery("#addMoreOptions").live('click',function(){
        console.log('clicked');
    });

Which works fine when I click on the link on the browser, but not when I simulate programmatically:

jQuery("#addMoreOptions").click();

The programatical version triggers the inline event but not the "live" one.

When you have multiple functions attached to an event, what order does it use?

Works for me: jsfiddle.net/mattlunn/zG9Jw. What version of jQuery are you using/ can you produce a fiddle where this breaks/ what browser are you using? — Matt
– Matt, Commented Sep 8, 2011 at 12:13
not getting what you are saying...what do you mean by simulate programmatically ? — Tushar Ahirrao
– Tushar Ahirrao, Commented Sep 8, 2011 at 12:14
The fact that you're registering the event with .live is making me think that when you issue the .click() the element doesnt exist yet. — Jamiec
– Jamiec, Commented Sep 8, 2011 at 12:18
You're right your example works. I am using Chrome, latest version of jQuery. I will look more into and get back. — Nathan H
– Nathan H, Commented Sep 8, 2011 at 12:19
I agree with @Jamiec, is the element loaded dynamically? if not, just for fun. add a delay before you fire the click event. — rlemon
– rlemon, Commented Sep 8, 2011 at 12:24

Jamiec · Accepted Answer · 2011-09-08 12:35:33Z

1

I am pretty sure this is caused by the order of things happening.

If you look at this live example you'll see everything works as expected. This is because the event is registered, and then called. The code looks like:

jQuery(document).ready(function(){   

    jQuery("#addMoreOptions").live('click',function(){
        console.log('clicked');
    });

     $('#addMoreOptions').click();      

});

function somefunction()
{
 alert("clicked");   
}

When the page loads, you get an alert and a console.log.

Now with the very small change of putting the $('#addMoreOptions').click(); before registering the event as in this live example you only get the alert from the inline function.

For reference the code is

jQuery(document).ready(function(){   
     $('#addMoreOptions').click();  

    jQuery("#addMoreOptions").live('click',function(){
        console.log('clicked');
    });   

});

function somefunction()
{
 alert("clicked");   
}

answered Sep 8, 2011 at 12:35

Jamiec

136k15 gold badges143 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nathan H Over a year ago

I removed the "inline" code and moved it to the live() call, so I have more control over the order of things. It fixed it.

Tyler Kiser · Accepted Answer · 2011-09-08 12:18:29Z

0

An alternative way of triggering a click event would be to use the .trigger() function:

jQuery('#addMoreOptions').trigger('click');

answered Sep 8, 2011 at 12:18

Tyler Kiser

9218 silver badges14 bronze badges

2 Comments

Matt Over a year ago

Considering all click() does is call trigger('click') behind the scenes, this will make no difference.

AlexBay Over a year ago

There's no difference, the problem may lay in the live function not binding the event before it's called.

Collectives™ on Stack Overflow

jQuery click event when triggered programatically

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related