click on link that created on the fly

Question

1.00/5 (1 vote)

See more:

the purpose of this question is just to figure something out

i have this html

HTML

<div id='div1'>
<input id='btn1' type='button' value='click here'/>
</div>

and this jquery

JavaScript

$('#btn1').click(function(){
$('#div1').append($("<a id='link1' target='_blank' href='http://www.google.com'>google </a>"));
});
$('#btn1').click();
$('#link1').click();

-the purpose of above example is to open google link automatically to test if i can click elements that created on the fly or not.
the above code not worked as expected
but
if i replace

JavaScript

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

with

JavaScript

document.getElementById('link1').click();

it works .

So i need explanation , thanks.

Posted 21-May-15 2:34am

Hercal

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2015-05-21T03:24:00

Solution 1

I can't see this mentioned in the official documentation, but jQuery's .click() method only triggers the attached event handlers; it doesn't actually click the link.

As you've discovered, the workaround is to call the .click() method on the raw DOM element, rather than the jQuery wrapper object.

However, most browsers will block the navigation, since pop-up windows which aren't initiated by the user are generally a bad thing.

Posted 21-May-15 3:24am

Richard Deeming

Comments

Hercal 21-May-15 9:26am

but u know when i use $('#btn1').click();
it works
when i use this $('#link1').click();
it doesn't work

Richard Deeming 21-May-15 9:29am

Yes, because it's not clicking the button; it's just triggering the registered event handlers.

You registered an event handler for the button's "click" event on the previous line. When you call .click(), it triggers that event handler.

If you registered an event handler for the link's "click" event, and then used jQuery's .click() method, that event handler would also fire. It's just that the browser would not attempt to follow the link.

Hercal 21-May-15 9:32am

i can't understand :( , i am beginner , can u use simple way

Richard Deeming 21-May-15 9:36am

Calling $("selector").click() calls the event handlers, but doesn't click the element.

Calling document.getElementById("id").click() calls the event handlers and clicks the element.

Hercal 21-May-15 9:39am

good , thanks.
why when calling $.click on button , it click the button
u said that it just triggering the registered event, what do u mean by that ?

Richard Deeming 21-May-15 9:42am

It does not click the button.

It just calls the functions which you have added as event handlers.

This line registers an event handler:
$('#btn1').click(function(){ /* THIS IS THE EVENT HANDLER */ });

When you click on the button, that event handler is called, and then the browser responds to the button click by submitting the form.

When you call $('#btn1').click();, that event handler is called, but the browser does not submit the form.

Hercal 21-May-15 10:05am

richard ,
u see those 2 lines in my code
$('#btn1').click();
$('#link1').click();
btn1 is work and clicked , link1 doesn't clicked
that is my question

Richard Deeming 21-May-15 10:10am

And as I keep trying to explain to you, btn1 is NOT clicked!

The event handler which you have registered is called, but the button is NOT clicked.

I don't know how else to explain this to you!

Hercal 21-May-15 10:16am

Oh Richard ,
i get it now , read below please and tell me if u understand it right or not
by writing this

$('#btn1').click(function(){
$('#div1').append($("google "));
});

and then $('btn1').click(); i execute the function which is appending but button itself not clicked , Right ?

Richard Deeming 21-May-15 10:16am

Yes, that right. :)

Hercal 21-May-15 10:22am

so jquery is stupid ,
i thought that $('#id').click(); ==document.getelemntbyid('id)
but u show me that they are different .
thanks richard

Sergey Alexandrovich Kryukov 21-May-15 10:34am

5ed. I would only add that the simulation of click is generally a bad idea, a sign of a bad UI development style (not only in JavaScript). Right approach is to abstract out the action and call it directly in two places, event handler and something else. It could be, say, simple redirection or something else.
—SA

Hercal 21-May-15 10:43am

SA , what will u do in case u have url like. http://www.domainname.com/category/subcategory
so when someone enter this url
u need category to be clicked and subcategory clicked
keep in mind that the subcategories are rendered as html after category click

so in this case i use .click method , do u have another solution ?