Trigger click jquery not working

2019-01-11 13:16发布

站内问答 / jQuery
1241 4 5

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.

4条回答
仙女界的扛把子
2楼-- · 2019-01-11 13:21

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

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

查看更多
0人赞 添加讨论(0) 举报
我想做一个坏孩纸
3楼-- · 2019-01-11 13:22

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

查看更多
0人赞 添加讨论(0) 举报
我欲成王，谁敢阻挡
4楼-- · 2019-01-11 13:31

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.

查看更多
0人赞 添加讨论(0) 举报
神经病院院长
5楼-- · 2019-01-11 13:40

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');
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)