Trigger click jquery not working

Question

I'm figuring out why this simple script is not working:

jQuery.noConflict();
jQuery(document).ready(function() {
    jQuery('.next_button a').trigger('click');
});

noConflict is necessary because I also load prototype/scriptaculous in this page.

If I replace .trigger('click') with another function (es: .css(...) this works well. Only triggering seems to go broken.

Your question is incomplete without a test case that demonstrates the problem. See [jsFiddle](http://jsfiddle.net/) — mekwall, May 03 '11 at 09:10
I can't post the website link, sorry, only in private, in case — Riccardo, May 03 '11 at 09:17
What Gary Green answered is probably what you are looking for, but without the rest of the code its impossible to know. — mekwall, May 03 '11 at 09:19

score 67 · Answer 1 · edited May 23 '17 at 10:31

67

How can I simulate an anchor click via jquery? Check this link and see this answer by Stevanicus.

$('a#swaswararedirectlink')[0].click();

edited May 23 '17 at 10:31

Community

1
1

answered Aug 24 '12 at 13:34

A Bright Worker

1,298
14
21

Can you tell why the `[0]` is necessary? – lorem monkey Sep 06 '12 at 16:54
9

[0] gets the first (DOM) element. The .click() function call is calling the browser's built-in 'click' function (not jquery's) – Tahir Hassan Sep 17 '12 at 10:33
7

this should be the accepted answer since it provides a solution, i.e., `[0]`. – tim peterson Mar 17 '13 at 03:48
1

Excellent! Worked fine without errors. I put as $('a.sliderLinks').trigger('click'); . But not worked. Then I put your code. superb! thanks again. – Sumith Harshan Aug 24 '13 at 06:18
damn! why is the [0] necessary? weird that click() doesn't get trigger the other selector, what does "[0] gets the first (DOM) element" do? (Tahir reply) – ah-shiang han Feb 12 '14 at 09:47
http://jsfiddle.net/YHx2d/ it works fine in this fiddle without [0].... but not on my real page... – ah-shiang han Feb 12 '14 at 09:51
@ah-shiang han Did you try with [0] in your page ? – A Bright Worker Feb 20 '14 at 04:55
yes, with [0] my page works, my question is that why fiddle works without using the [0]... but my page it is required to have [0]. I'm kinda confused. Thanks in advance for explaining – ah-shiang han Feb 20 '14 at 05:39
Its weird how cycling through some elements that i need clicked (opening links in new tabs) only works once... NO IDEA why... – ied3vil Jun 29 '16 at 13:04
Really Helpful answer. Need to accept it. @Riccardo Thanks buddy +1 – RJParikh Mar 20 '17 at 13:14

score 50 · Answer 2 · answered May 03 '11 at 09:13

50

You can only trigger a click that jQuery has created. It's one of jQuery's cute little quirks.

answered May 03 '11 at 09:13

Gary Green

22,045
6
49
75

4

Good advice, i.e. use the trigger method AFTER you've established the click listener – Doug Molineux Jun 06 '11 at 20:54
1

Not only that, Pete but this also means default anchor tag use – Brandt Solovij Jul 17 '12 at 17:55
1

+1 YOU! This saved me from breaking my desk and throwing out my computer! A note to people who may be working with backbone + requirejs. If your trigger events on UI elements are not working, you may just have a handle on the wrong jquery object wherever you are calling it. – JohnP Feb 26 '13 at 18:29
Trigger after Listener. Trigger AFTER listener. Hours wasted until I found this out. +1 @PeteHerbertPenito – khany Jul 02 '14 at 14:01
That helped. Thanks – arshad May 31 '16 at 13:27

score 12 · Answer 3 · answered Oct 27 '13 at 03:19

12

as what Gary has answered. the code below will not work.

$('#border_wrap').trigger('click');    
$('#border_wrap').click(function(e){
    console.log("clicked1");
});

but this will.. :)

$('#border_wrap').click(function(e){
    console.log("clicked1");
});
$('#border_wrap').trigger('click');

answered Oct 27 '13 at 03:19

keithics

8,576
2
48
35

Thanks @keithics, I was doing blunder mistake which you have explained above. – Mahesh.D Dec 31 '13 at 07:22

score 0 · Answer 4 · edited May 23 '17 at 12:02

I thought that this demo would not work but it does (Chrome 12). It will alert two messages, one for each click event. One is created by jQuery and one is native but I thought that only jQuery events could be triggered.

Edit: Yes the click does not follow href.

Edit 2: So the event you want to manually trigger is actually an event created by a Prototype carousel plugin. For the code below I am assuming it is this one. If that is the case, why can't you just use fire the event using Prototype or natively… like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style type="text/css">
        #carousel-wrapper {
            width:100px;
            height:100px;
            overflow:hidden;
            border:1px dashed red;
        }
        #carousel-content {
            width:500px;
        }
        #carousel-content .slide {
            float:left;
            width:100px;
            height:100px;
        }
    </style>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js"></script>
    <script type="text/javascript" src="http://prototype-carousel.googlecode.com/files/carousel-min.js"></script>
    <script type="text/javascript" src="https://github.com/kangax/protolicious/raw/5b56fdafcd7d7662c9d648534225039b2e78e371/event.simulate.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        jQuery.noConflict();

        function fakeClick(event, anchorObj) {
          if (anchorObj.click) {
            anchorObj.click()
          } else if(document.createEvent) {
            if(event.target !== anchorObj) {
              var evt = document.createEvent("MouseEvents");
              evt.initMouseEvent("click", true, true, window,
                  0, 0, 0, 0, 0, false, false, false, false, 0, null);
              var allowDefault = anchorObj.dispatchEvent(evt);
              // you can check allowDefault for false to see if
              // any handler called evt.preventDefault().
              // Firefox will *not* redirect to anchorObj.href
              // for you. However every other browser will.
            }
          }
        }
    </script>
</head>
<body>
<div id="carousel-wrapper">
    <div id="carousel-content">
        <div class="slide">1</div>
        <div class="slide">2</div>
        <div class="slide">3</div>
    </div>
</div>
<div>
    <a href="javascript:" class="carousel-jumper" rel="slide-1">Jump to slide 1</a>
    <a href="javascript:" class="carousel-control" rel="prev">Previous slide</a>
    <a href="javascript:" class="carousel-control" id="next" rel="next">Next slide</a>
</div>
<script type="text/javascript">
    new Carousel('carousel-wrapper', $$('#carousel-content .slide'), $$('a.carousel-control', 'a.carousel-jumper'));

    document.observe("dom:loaded", function() {
//        $$('a[rel="next"]')[0].simulate('click');
        fakeClick(event, document.getElementById('next'));
    });
</script>
</body>
</html>

There are two examples in this demo of event firing (one is commented out but you can switch for the same result). One is from Trigger an event with Prototype which uses event.simulate.js and one using the fakeClick() function from How can I simulate a click to an anchor tag?. Either of which is working for me in Chrome 12.

Thanks to all of you but still doesn't work even if I tried your various solutions..I don't really know. If could help..the element i'm trying to autoclick is the next button of a scriptaculous carousel..that maybe has autoclicking disabled by design ?? mmmmm.. — Riccardo, May 03 '11 at 09:50
It wasn't made by me, it's called from carousel.js and it's named as 'HP carousel"... — Riccardo, May 03 '11 at 10:48
Why do you need to use jQuery if it's a Prototype carousel? Updated my answer with a potential solution, assuming you are using [prototype-carousel](http://code.google.com/p/prototype-carousel/). — andyb, May 03 '11 at 11:27

Trigger click jquery not working

4 Answers4

Linked

Related