Programmatically click on a link using jQuery on page load

Question

I have a link that is on the page and I want to click it programmatically when the page loads.

Something like this:

$(document).ready(function () {

   // code to make the page think $('a.tagcloud-link') is clicked
});

The link is an AJAX call that displays the popular tags in Wordpress backend.

The function cannot easily be edited as it's dependent on many things.

So I want to trigger the AJAX link that calls the most popular tags on page load.

This will solve all my problems if it works.

That link is $('a.tagcloud-link')

Please, please help me on this I've spent hours pulling my hair out trying and failing to do this. Thank you.

It appears from your comments that you are not outlining the actual problem you are having. Please elaborate on exactly what you are trying to do so the answers can be targeted to the specific use case. — JamesSwift
– JamesSwift, Commented Oct 24, 2012 at 0:18
@JamesSwift thanks for the tip, edited the question accordingly — Claudio Delgado
– Claudio Delgado, Commented Oct 24, 2012 at 0:30

nnnnnn · Accepted Answer · 2012-10-24 00:46:34Z

8

Try this:

$('a.tagcloud-link')[0].click();

Using [0] gets a reference to the first DOM object in the jQuery object so this calls the DOM object's (non-jQuery) .click() method which will cause the navigation to the link's specified href.

Using jQuery's .click() method would call any click handler that you'd bound to the element, but won't cause the default behaviour to actually follow the link.

Really simple demo: http://jsfiddle.net/mtBav/

edited Oct 24, 2012 at 0:46

answered Oct 24, 2012 at 0:19

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

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

8 Comments

Claudio Delgado Over a year ago

This didn't work. the function totally stopped working after trying to load that code on page load.

nnnnnn Over a year ago

What I've shown would cause an error if no elements exist that match the 'a.tagcloud-link' selector, so make sure you've actually created the element first. The code in your fiddle does not create any such element, and you haven't shown any html, so... (Your fiddle isn't very helpful: you're supposed to post JS code into the JavaScript window (bottom left), not into the HTML window where you put it.)

Claudio Delgado Over a year ago

The element exists. But I think something blocks it from being available to clicking outside the usual code because I've tried everything suggested so far. Sorry about the fiddle, fixed it.

nnnnnn Over a year ago

But the code in your fiddle doesn't create the link element, so where does it exist? Is it in your HTML (which you don't show)?

nnnnnn Over a year ago

Sorry, your fiddle isn't really functional since the PHP doesn't actually run, and for some reason it takes ages to load up so I can't really experiment with it. Here is a really simple demo that shows my code will work (placed in a document.ready handler): jsfiddle.net/mtBav

|

jAndy · Accepted Answer · 2012-10-24 00:10:11Z

4

If that element owns an event handler which was bound with jQuery too, you might just call .trigger( 'click' ) or short .click();

$(function() {
    $('a.tagcloud-link').click();
});

Of course, at the time when you invoke .click(), that event handler must be bound already.

answered Oct 24, 2012 at 0:10

jAndy

237k57 gold badges313 silver badges363 bronze badges

Comments

Heart · Accepted Answer · 2012-10-24 04:32:03Z

3

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("a#tobeclicked").click(function () {
// if it has to be href
var tohref = $(this).attr("href");
alert(tohref);
window.location=tohref;


// else you want add some functions

$("#mydiv").fadeIn();

});
$("a#tobeclicked").trigger('click');
});
</script>
<a id="tobeclicked" href="http://www.google.com">Go!</a>
<div id="mydiv" style="display:none;">Stroam</div>

answered Oct 24, 2012 at 4:32

Heart

5181 gold badge3 silver badges14 bronze badges

1 Comment

Heart Over a year ago

hey man you said none of the answers worked for you check the above code which i have added. It works 100% man... I checked it 5 times and working perfectly!

Reflective · Accepted Answer · 2012-10-24 00:09:44Z

1

If I correctly understood the question:

   $('a.tagcloud-link').click();

answered Oct 24, 2012 at 0:09

Reflective

3,9371 gold badge17 silver badges25 bronze badges

2 Comments

Reflective Over a year ago

use that just after your link is inserted dynamicaly and appender to the DOM tree - #('body').append('<a class="tagcloud-link" href=""...>...</a>'); $('a.tagcloud-link').click();

Claudio Delgado Over a year ago

The code is being added by normal HTML and not with .append() I'm trying to implement what you suggested using an inline <script> tag after the HTML code.

Jonas T · Accepted Answer · 2012-10-24 00:10:26Z

1

If you have already binded $('a.tagcloud-link').click(), it will call that function. The following code should work.

$(document).ready(function () {
 $('a.tagcloud-link').click();
});

But if you want to open the link in its href, you need to use window.location.

answered Oct 24, 2012 at 0:10

Jonas T

3,0954 gold badges35 silver badges45 bronze badges

1 Comment

Claudio Delgado Over a year ago

This didn't work. Obviously I'm doing something wrong as the link works when clicked manually and the code you've given should really work but it doesn't execute the action on page load :|

Sushanth -- · Accepted Answer · 2012-10-24 00:10:32Z

1

Try

$('a.tagcloud-link').click();

OR

$('a.tagcloud-link').trigger('click')

answered Oct 24, 2012 at 0:10

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

1 Comment

Claudio Delgado Over a year ago

This didn't work. I should mention that the link that I want to click on when the page opens is itself a code generated by jQuery code dynamically. But I want to simulate a click on it when the document is loaded. surely there's a way?

anche · Accepted Answer · 2012-10-24 00:11:24Z

1

$(function() {
     $('a.tagcloud-link').on('click', function() {
          // execute code here
     });
});

This is proper use of jQuery.

answered Oct 24, 2012 at 0:11

anche

2,9046 gold badges30 silver badges40 bronze badges

2 Comments

Claudio Delgado Over a year ago

I want to simulate the link being clicked on page load. I don't think your code does that.

anche Over a year ago

Then you should add more code, what do you want the script to do if the scripts 'thinks' that a.tagcloud-link is clicked?

Jim · Accepted Answer · 2012-10-24 00:51:55Z

1

To be honest with you, I think everyone else here is right and I think the question is framed wrong. But heres my attempt and I think all I did was just frame it a little different. Just trying to help.

document.addEventListener("DOMContentLoaded", function() {
    EventL();
});

// global
var tagLoad = false;

function eventL() {
    $('a.tagcloud-link').on('click', function() {
       tagLoad = true;
    });

    // you can repurpose this, its for page refresh right now. but
    // I think it helps with your general idea?
    $(window).load(function(){ 
       init();
    });
}

function init () {
    if (tagLoad == true) {
         // Load your tags.
    }
}

answered Oct 24, 2012 at 0:51

Jim

1,2941 gold badge10 silver badges17 bronze badges

2 Comments

Claudio Delgado Over a year ago

It might be framed wrong but you can tell me how to frame it, although seems like you didn't understand what I wanted to achieve. Anyway, thanks for trying to help!

Jim Over a year ago

I read somewhere that you want to simulate a click, are you looking for the visual appearance of that? or are you looking for something to remember that a button has been clicked on your wordpress template?

Claudio Delgado · Accepted Answer · 2012-10-25 00:05:17Z

0

None of these helped. I fixed it myself by bypassing the link and executing it on load.

answered Oct 25, 2012 at 0:05

Claudio Delgado

2,3497 gold badges21 silver badges27 bronze badges

1 Comment

Samantha Branham Over a year ago

Yeah, I don't understand what these people don't get about click() not working lol. Same boat you are, trying to automate something in a Greasemonkey script.

fishpie · Accepted Answer · 2014-10-16 09:09:39Z

0

function my_admin_head(){
echo 
'<script type="text/javascript">
    jQuery(function( $ ){ 
        $(\'a.tagcloud-link\').each( function(){
            tagBox.get( $(this).attr(\'id\') );
            $(this).unbind().click(function(){
                $(this).siblings(\'.the-tagcloud\').toggle();
                return false;
            });
        return false;
    });
});
</script>';
}
add_action('admin_head', 'my_admin_head');

Maybe it can help somebody.

answered Oct 16, 2014 at 9:09

fishpie

1

Comments

Bruno Reis Silvino · Accepted Answer · 2016-09-09 01:16:20Z

0

Maybe the way you was using to access the element be mixing jquery syntax with javascript. I'v got this problem too, but I was trying to access a element by wrong way.

It was like this

$(document).ready(function(e){
        alert(location.hash);
        if (location.hash == "#22") {
            $("gallery div a")[1].click(); //without #
        };
    })

but should be like this

$(document).ready(function(e){
        alert(location.hash);
        if (location.hash == "#22") {
            $("#gallery div a")[1].click(); //with #, cause I was using an ID
        };
    })

And works :)

answered Sep 9, 2016 at 1:16

Bruno Reis Silvino

393 bronze badges

Collectives™ on Stack Overflow

Programmatically click on a link using jQuery on page load

11 Answers 11

8 Comments

Comments

1 Comment

2 Comments

1 Comment

1 Comment

2 Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

8 Comments

Comments

1 Comment

2 Comments

1 Comment

1 Comment

2 Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related