How to simulate click on page load?

Question

My objective is not simple redirection!

Even before you mark it as duplicate, I've already tried this, this and this. It didn't worked. I've tried it in following code.

<a href="http://google.com" class="test_class">click me</a>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script language="javascript">
$("document").ready(function() {
    setTimeout(function() {
        //$('.test_class').click();
        $('.test_class').trigger('click');
    },10);

});
</script>

I've tried the click event with and without setTimeout, nothing worked. I've tried with id as well, it didn't worked. I'm using google chrome Version 44.0.2403.157 (64-bit) on ubuntu 14.04, if at all it matters.

Edit: I've tried following variations as well just now, and they didn't worked :(

 $(document).ready(function() { //removed quotes.
    setTimeout(function() {
        //$('.test_class').click();
        $('.test_class').trigger('click');
    },10);

});

This one

$(document).ready(function() {
    setTimeout(function() {
        //$('.test_class').click();
        $('.test_class')[0].trigger('click'); //added array representation
    },10);

});

And This one, Peculiarity of this click event is that I can see alert, but the click event of <a> isn't happening.

<a href="http://google.com" class="test_class">click me</a>
<div class="submit_btn" style="display:none;" onclick="dothis();"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script language="javascript">
function dothis()
{
    alert('dskjhfjkds');
    $('.test_class').click();
}
$(document).ready(function() {
    setTimeout(function() {
        //$('.test_class').click();
        $('.submit_btn').click();
    },10);

});

//$('.test_class')[0].trigger('click');
</script>

p.s. My actual scenario of of click event differs, it is not simple redirection to google website.

Does it still not work when the link simply points to a URL? — Anthony Grist, Sep 04 '15 at 19:22
possible duplicate of [How do I programmatically click a link with javascript?](http://stackoverflow.com/questions/902713/how-do-i-programmatically-click-a-link-with-javascript) — , Sep 05 '15 at 02:41
@JarrodRoberson I've already tried the id method, I've shared the link myself in my question! So, it doesn't look like a duplicate to me :) — Abhishek, Sep 05 '15 at 02:43
Why must the AJAX call to your server be triggered by a click? — jczimm, Sep 05 '15 at 03:30

score 2 · Answer 1 · answered Sep 04 '15 at 19:23

2

Do this instead:

$('.test_class')[0].click();

answered Sep 04 '15 at 19:23

Robin Carlo Catacutan

13,249
11
52
85

D4V1D · Answer 2 · 2015-09-05T03:25:47.837

2

It seems that href attribute is not followed when you trigger the click event on a <a> element.

Therefore:

<a href="http://google.com" class="test_class">click me</a>
<script>
    $(document).ready(function() {
        setTimeout(function() {
            $('.test_class').click(); // this won't trigger the link to google.com
        },10);
    });
</script>

Won't have any effect when:

<a href="http://google.com" onClick="alert('this is an alert');" class="test_class">click me</a> <!-- notice the onClick attribute -->
<script>
    $(document).ready(function() {
        setTimeout(function() {
            $('.test_class').click(); // this will trigger the alert
        },10);
    });
</script>

This one will.

I guess there must be something preventing links with href attribute to be triggered by Javascript.

If you want to perform a redirect in HTML, I suggest you to dig into the <meta http-equiv="refresh" content="5; URL=http://www.mydomain.tld"> tag.

edited Sep 05 '15 at 03:25

answered Sep 05 '15 at 02:53

D4V1D

5,805
3
30
65

As I said, I don't need simple redirection in my question earlier. Basically I need to click a element on page load and it will trigger ajax call to my server. – Abhishek Sep 05 '15 at 03:01
Anyways, I don't see the alert as well. I copied your code and saved it as abc.html, but I don't see the alert. I'm on chrome. – Abhishek Sep 05 '15 at 03:10
@Abhishek: Why don't you simply do your ajax call on `$(document).ready();`? You should see the alert, here's a [JSFiddle](https://jsfiddle.net/1jhc8L4s/). – D4V1D Sep 05 '15 at 03:21
That ajax call happens on click of one element on the page, that is the reason I'm trying to click that element. – Abhishek Sep 05 '15 at 03:23
@Abhishek: Can you share the binding event of that one element to the Ajax call please? – D4V1D Sep 05 '15 at 03:24
It is in rails. `<%= link_to "Test Click", my_path(:action_id =>'test_click'), remote: true, :class => "js_elem" %>`. The `remote: true` will do ajax call for me. I don't have to handle anything in this case.. hence I don't have any ajax call binded to that element – Abhishek Sep 05 '15 at 03:28
Sorry, I have no use of Rails. Cannot help you on this one. – D4V1D Sep 05 '15 at 03:30
That's okay.. Thanks for your time. Anyways, if this click thing can be resolved then I can resolve my rails issue as well. :) – Abhishek Sep 05 '15 at 03:31

score 1 · Answer 3 · answered Sep 04 '15 at 19:24

1

You need to do the DOM event click for the element by accessing $('.test_class')[0]:

$('.test_class')[0].click();

answered Sep 04 '15 at 19:24

Spencer Wieczorek

21,229
7
44
54

How to simulate click on page load?

3 Answers3