18

I have a simple link click simulation that I want to do using jQuery. From what I read, this should work, but the code below doesn't work. Nothing happens if I do the same thing as a part of some other event or something either. Thoughts?

<script type="text/javascript">
  $(function() {
    $("#lnk_0").click();
  });
</script>

<a id="lnk_0" href="http://mydomain.com/mypage.html">link</a>

7 Answers 7

26

See click():

Triggers the click event of each matched element.

Causes all of the functions that have been bound to that click event to be executed.

The important thing to note is that it does not duplicate clicking the link. It only triggers associated events. If you want to change location:

var link = $("#link_0");
link.click();
window.location.href = link.attr("href");

but even that is only an approximation as it doesn't cater for handlers stopping event propagation.

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

1 Comment

Okay, thanks for clarifying that. I've actually spent some time staring at that exact documentation. I would think that navigating to the new location qualifies as an "associated event." I guess, technically, it's not? :/ I will accept this answer, but SLaks input below is also very helpful. Let this stand as the answer to programmers once and for all! $("#my_hyperlink").click() will not cause the browser to navigate!
10

Calling jQuery's click method will invoke any click handlers that you've added, but will not click the link.

You need to write:

window.location = $("#lnk_0").attr('href');

(This assumes that there aren't any click event handlers)


EDIT: In response to your comment, you can call the IE-only DOM click method, like this:

if ($("#lnk_0")[0].click)
    $("#lnk_0")[0].click();
else
    window.location = $("#lnk_0").attr('href');

1 Comment

SLaks, thanks for your solution. Only problem is it has the really annoying side effect of losing the Referer URL header in IE, which is what I'm trying to prevent.
4

To allow the hyperlink functionality (hover, hand cursor, etc) when overriding with jQuery you can do the following:

<script>
    $(function() {
        $( "#dialog-modal" ).dialog({
            autoOpen: false,
            height: 320,
            modal: true
        });

        $( "#open-modal" ).click(function() {
            $( "#dialog-modal" ).dialog( "open" );
        });         
</script>
<a href="javascript:return true" id="open-modal">Open Modal</a>

<div id="dialog-modal" title="Hello World">
Hello
</div>

Comments

2

Doing this works:

$('#lnk_0')[0].click();

1 Comment

The reason why I find this useful is because it defaults to document.getElementById("lnk_0").click();.
0

Just use

document.getElementById('#lnk_0').click();

or

$("#lnk_0")[0].click();

Comments

0

This one worked for me, include the $("#lnk_0").click() inside the $(document).ready handler:

$(document).ready(function () {
    $("#lnk_0").click(function (e) {
      //your code here
    });
});

Comments

-1

I am not sure it solves your precise problem, but here is a snippet of code I use to simulate a user click:

var target = "...";

var e = jQuery.Event("click");

target.trigger(e);

if (!e.isDefaultPrevented() && target.attr("href"))
    window.location.href = target.attr('href');

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.