ansaurus

Question

How can I simulate an anchor click via jquery?

Answer 1

+21 A:

Try to avoid inlining your jQuery calls like that. Put a script tag at the top of the page to bind to the click event:

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

<input id="thickboxButton" type="button" value="Click me">
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>

Edit:

If you're trying to simulate a user physically clicking the link, then I don't believe that is possible. A workaround would be to update the button's click event to change the window.location in Javascript:

<script type="text/javascript">
$(function(){
 $('#thickboxButton').click(function(){
  window.location = $('#thickboxId').attr('href');
 });
});
</script>

Edit 2:

Now that I realize that Thickbox is a custom jQuery UI widget, I found the instructions here:

Instructions:

Create a link element (<a href>)
Give the link a class attribute with a value of thickbox (class="thickbox")
In the href attribute of the link add the following anchor: #TB_inline
In the href attribute after the #TB_inline add the following query string on to the anchor:

?height=300&width=300&inlineId=myOnPageContent
Change the values of height, width, and inlineId in the query accordingly (inlineID is the ID value of the element that contains the content you would like to show in a ThickBox.
Optionally you may add modal=true to the query string (e.g. #TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true) so that closing a ThickBox will require calling the tb_remove() function from within the ThickBox. See the hidden modal content example, where you must click yes or no to close the ThickBox.

John Rasch 2009-04-21 17:39:54

window.location in the click handler does not work, as then the thickbox does not work as expected.

prinzdezibel 2009-04-21 17:56:53

Answer 2

+1 A:

Do you need to fake an anchor click? From the thickbox site:

ThickBox can be invoked from a link element, input element (typically a button), and the area element (image maps).

If that is acceptable it should be as easy as putting the thickbox class on the input itself:

<input id="thickboxButton" type="button" class="thickbox" value="Click me">

If not, I would recommend using Firebug and placing a breakpoint in the onclick method of the anchor element to see if it's only triggered on the first click.

Edit:

Okay, I had to try it for myself and for me pretty much exactly your code worked in both Chrome and Firefox:

<html>
<head>
<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />
</head>
<body>
<script src="jquery-latest.pack.js" type="text/javascript"></script>
<script src="thickbox.js" type="text/javascript"></script>
<input onclick="$('#thickboxId').click();" type="button" value="Click me">
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>
</body>
</html>

The window pop ups no matter if I click the input or the anchor element. If the above code works for you, I suggest your error lies elsewhere and that you try to isolate the problem.

Another possibly is that we are using different versions of jquery/thickbox. I am using what I got from the thickbox page - jquery 1.3.2 and thickbox 3.1.

waxwing 2009-04-21 18:15:01

Yes, I need to fake it and yes the click handler itself works. But in fact, I didn't set the onclick event at all and it works, but only the first time. But also with onclick handled in thickboxId it will not work.

prinzdezibel 2009-04-21 18:31:22

What I meant was to verify that the onclick in the anchor element is triggered every time you click the input element. Oh, and see my edit above.

waxwing 2009-04-21 18:49:29

Answer 3

+1 A:

The question title says "How can I simulate an anchor click in jQuery?". Well, you can use the "trigger" or "triggerHandler" methods, like so:

<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/thickbox.js"></script>
<script type="text/javascript">
$(function() {
    $('#btn').click(function() {
        $('#thickboxId').triggerHandler('click');
    })
})
</script>
...
<input id="btn" type="button" value="Click me">
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>

Not tested, this actual script, but I've used trigger et al before, and they worked a'ight.

UPDATE
triggerHandler doesn't actually do what the OP wants. I think 1421968 provides the best answer to this question.

elo80ka 2009-04-21 19:24:54

This didn't work for me. I tried it on Chrome and Safari.

Senseful 2010-04-22 21:23:26

Answer 4

+2 A:

I've recently found how to trigger mouse click event via jQuery.

    <script type="text/javascript">
    var a = $('.path > .to > .element > a')[0];
    var e = document.createEvent('MouseEvents');
    e.initEvent( 'click', true, true );
    a.dispatchEvent(e);
    </script>

Jure 2010-02-04 11:10:10

I don't think this works in IE, at least not 7 or 8, because there doesn't appear to be a createEvent method on document.

Jeremy 2010-03-08 20:27:06

This works in Chrome and Safari.

Senseful 2010-04-22 21:15:55

As eagle says, this works in webkit browsers. But note that you are not really using jQuery here (other than the $ selection)

tokland 2010-07-24 15:19:49

Answer 5

+3 A:

I'd suggest to look at the Selenium API to see how they trigger a click on an element in a browser-compatible manner:

selenium-browserbot.js

Look for the BrowserBot.prototype.triggerMouseEvent function.

Sébastien RoccaSerra 2010-02-04 11:34:55

Answer 6

+1 A:

Using Jure's script I made this, to easily "click" as many elements as you want.
I just used it Google Reader on 1600+ items and it worked perfectly (in Firefox)!

var e = document.createEvent('MouseEvents');
e.initEvent( 'click', true, true );
$(selector).each(function(){this.dispatchEvent(e);});

bfred.it 2010-03-08 15:24:15

I don't think this works in IE, at least not 7 or 8, because there doesn't appear to be a createEvent method on document.

Jeremy 2010-03-08 20:29:11

I believe that document.createEventObject() should be used in IE instead, but I haven't tried it.

bfred.it 2010-03-12 02:03:11

This method works in Chrome and Safari.

Senseful 2010-04-22 21:29:00

Answer 7

A:

You can create a form via jQuery or in the HTML page code with an action that mimics your link href:

<a id="anchor_link" href="somepath.php">click here</a>.

var link = $('#anchor_link').attr('href');
$('body').append('<form id="new_form" action="'+link+'"></form>');
$('#new_form').submit();

Rus Miller 2010-03-11 23:58:23

This method causes the entire page to reload rather than simply jumping to an anchor. Additionally, it also adds the "?" to the url so the page becomes http://example.com?#test instead of http://example.com#test. Tested on Chrome and Safari.

Senseful 2010-04-22 21:21:25

Answer 8

A:

JQuery('#left').triggerHandler('click'); works fine in Firefox and IE7. I havent tested on other browsers

If want to trigger automatic user clicks use as below window.setInterval(function() { JQuery('#left').triggerHandler('click'); }, 1000);

Singh 2010-07-29 02:43:42

Answer 9

A:

To simulate a click on an anchor while landing on a page, I just used jQuery to animate the scrollTop property in $(document).ready. No need for a complex trigger, and that works on IE 6 and every other browser.

Julien 2010-08-20 16:54:21

ansaurus

tags:

views:

answers:

How can I simulate an anchor click via jquery?

Instructions:

related questions