how to fake a click on a dynamic element?

Question

On a static element, to fake a click, I use

$(selector).click();

But how can I do the same thing on a dynamic element (resulted from an ajax call)?

it's hard to do this because it is too long and related to alot of other complicated things. It's a real life project. — Leo Lerdorf, Feb 19 '12 at 16:29
Is the element a variable containing multiple elements gathered during page load ? — adeneo, Feb 19 '12 at 16:51
make sure that the new element has an ID or Class you can use as element reference and you can use the same way you trigger any regular element. like in your example. — Ikoy, Feb 19 '12 at 16:08

gdoron · Answer 1 · 2012-02-19T17:16:52.230

3

The same...:

$(selector).click();

Why didn't you try it first?

P.S. it is not called fake a click, it's called trigger the click event.

$(selector).trigger('click'); == $(selector).click();

Update

You need to bind that element a callback to the event in order it to work:

$(selector).click(function(){...});
$(selector).click();

If you want it to have the the click callback you assigned to the static elements automaticlly, you should use on\ delegate (or live but it's deprecated) when you attach the click callback.

$('body').on('click', 'selector', function(){...})

instead if body use the closest static element the holds that selector elements.

See my DEMO

edited Feb 19 '12 at 17:16

answered Feb 19 '12 at 16:03

gdoron

147,333
58
291
367

I tried, but i didnt work. .click() is just for static element, not dynamic – Leo Lerdorf Feb 19 '12 at 16:15
@LeoLerdorf. That is not true. Your selector **must be** wrong. Check it: `alert($(selector).length);` . Are you sure you binded it an event??? – gdoron Feb 19 '12 at 16:17
thanks, i bound an event for it using .live('click', callback() {//blah blah}) (it's deprecated but still works well). Then I call $(selector).click(); but nothing happen – Leo Lerdorf Feb 19 '12 at 16:32
@LeoLerdorf. I added a demo to my answer, check it out. – gdoron Feb 19 '12 at 17:17

score 0 · Answer 2 · answered Mar 24 '14 at 18:21

use on() method of jquery,

staticElement.on('click', selector, function(){})

on method generates click event on dynamically created element by attaching it to the static element present in the DOM .

For further reference check this out -- https://api.jquery.com/on/

score 0 · Answer 3 · answered Feb 19 '12 at 16:05

0

within your ajax success function try your code:

$(selector).click();

answered Feb 19 '12 at 16:05

thecodeparadox

86,271
21
138
164

Valky · Answer 4 · 2012-02-19T17:38:13.523

0

Don't know if I understand (I'm french sorry...)

But try :

 $(selector).live('click',function(){}); // deprecated it seems

Demo of gdoron with live() : http://jsfiddle.net/Rx2h7/1/

edited Feb 19 '12 at 17:38

answered Feb 19 '12 at 16:23

Valky

1,856
3
20
38

Those two lines do totally two different things! – gdoron Feb 19 '12 at 16:24
Sorry, but when I load dynamic content with ajax, click() doesn't work anymore, but live('click'... works like a charm. – Valky Feb 19 '12 at 16:28
http://stackoverflow.com/questions/8042576/whats-the-difference-between-jquery-live-and-on – Valky Feb 19 '12 at 16:33
@Valky - The first one is just another way of writing click(), it is not live, delegated or anything else, for that you would need to do something like this: `$(someParent).on('click', 'selector', function(){});` – adeneo Feb 19 '12 at 17:05
I added a demo to my answer, check it out. – gdoron Feb 19 '12 at 17:17
Your first line equals to `$(selector).click(function(){...})` it's not dynamic at all! – gdoron Feb 19 '12 at 17:18
Updated, happy ? If not, I could erase my answer tried. Then, now, you will earn your up votes and validate answer, don't worry you'll be gratified like a master... – Valky Feb 19 '12 at 17:28

score 0 · Answer 5 · edited May 23 '17 at 12:07

Basing this on your previous question : How can I select a list of DOM objects render from an AJAX call?

$(document).ready(function(){
     var listItems = $('#myList li a');
     var containers = $('#myContainer > div');

     listItems.click(function(e){//do someting
     });

etc...

If the elements you are trying to attach a click handler to are supposed to be inside any of the two variables above then you WILL have to update those variables after the elements are inserted into the DOM, as it is right now only elements that exists during first page load will be inside those variables.

That is the only reason I can think of why something like :

$(document).on('click', listItems, function(e) {//do something
});

will not work!

how to fake a click on a dynamic element?

5 Answers5