Click link on load with jQuery

Go To StackoverFlow.com

4

Here's a contrived example of my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>    
        <title></title>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
        <link rel="stylesheet" type="text/css" href=".css"/>
    </head>
    <body>
        <div>
            <a href="http://www.google.com" class="foo">YahOO</a>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
       <script type="text/javascript">
            $("document").ready(function() {
                $("#foo").trigger('click');
            });
        </script>
    </body>
</html>

I would like to have the link fired immediately upon page load. The above does not work and is incorrect? How could this be done?

2012-04-03 19:58
by Paul


14

You have the class foo set on your element, not an id so you need to use .foo. Also, as @JusticeErolin pointed out, the document ready handler doesn't need quotes. Try this:

$(document).ready(function() {
    $(".foo").trigger('click');
});

For reference, $("#foo") will look for an element with id="foo", of which there should only ever be one in your page as ids should be unique.

$(".foo") will look for elements with class="foo", of which you can have as many as you like.

2012-04-03 19:59
by Rory McCrossan
+1 You're all over it today, huh? ;- - James Johnson 2012-04-03 20:01
@JamesJohnson Haha, slow day at work. Procrastination is great : - Rory McCrossan 2012-04-03 20:02
Also, use $(document) without quotes - Justice Erolin 2012-04-03 20:02

This should work now? If not...?? - Paul 2012-04-03 20:34

Correct me if I'm wrong, but what the poster seems to be trying to do is open the url "http://www.google.com" on page load. What $(".foo").trigger('click'); does is fire all the jQuery click-eventlisteners that are binded to the foo-class. Although your answer is correct, I must state that what he seems to be trying to do will not work this way. (He could try faking it with adding a click-eventlistener to the elements with the foo-class and using window.location.href = url. (Although I cannot think of one single use for this weird way to redirect.) - Sander Bruggeman 2012-04-03 20:38
Yes. I was reading about binding?http://api.jquery.com/trigger - Paul 2012-04-03 20:42
Hm. Could you explain what you're really trying to do when the user visits the page? What should happen exactly - Sander Bruggeman 2012-04-03 21:04
A user clicks a link on page A. This opens up a new window (popup) page B (window.open + document.write function). Page A then "auto" clicks a specific link on page B. Note this link (a href) has underlying javascript associated with it. Do not ask about the logic of why, it just is unfortunately.. - Paul 2012-04-04 16:20
The above answers were correct. I needed binding for one part as well click for the other - Paul 2012-04-13 15:33


1

I tried many options, but I found one option which worked for me :

$(document).ready(function(){ 
     $('#upload-file')[0].click(function(){
     }); 
});
2017-04-14 10:48
by Irshad Khan


-1

You have to wait until controls are loaded on the page

add this to the bottom on the page

<script>
$(document).ready(function(e){
$("#whateverElement").click();
});
</script>
2014-11-15 15:36
by user4255991
It was not the problem, because jQuery's ready functionality will wait for the page to load completely. It is neither necessary to place the JS code at the end of the page. Read the accepted answer - mcserep 2014-11-15 15:48