Question

我正在弄清楚为什么这个简单的脚本无效：

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

noConflict是必要的，因为我还在此页面中加载了prototype / scriptaculous。

如果我用另一个函数替换.trigger('click')（es：.css(...)这很有效。只有触发似乎会破坏。

Answer 1

How can I simulate an anchor click via jquery? 检查此链接并查看 this answer by Stevanicus

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

Answer 2

您只能触发jQuery创建的点击。这是jQuery可爱的小怪癖之一。

Answer 3

正如加里所回答的那样。下面的代码不起作用。

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

但这会......：）

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

Answer 4

我认为this demo不起作用，但确实如此（Chrome 12）。它将alert两条消息，每个点击事件一条消息。一个是由jQuery创建的，一个是原生的，但我认为只能触发jQuery事件。

~~修改：是click未跟href。~~

编辑2：因此，您要手动触发的事件实际上是由Prototype轮播插件创建的事件。对于下面的代码，我假设它是this one。如果是这种情况，为什么不能只使用Prototype或本地使用fire the event ......就像这样：

<!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>

此事件触发演示中有两个示例（一个已注释掉，但您可以切换相同的结果）。一个来自Trigger an event with Prototype，event.simulate.js使用How can I simulate a click to an anchor tag?，另一个使用{{3}}中的fakeClick()函数。在Chrome 12中，其中任何一个都适合我。

触发单击jquery无法正常工作

4 个答案: