触发点击 jquery 不起作用

发布于 2024-11-04 09:09:53 字数 335 浏览 1 评论 0 原文

我正在弄清楚为什么这个简单的脚本不起作用：

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

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

如果我将 .trigger('click') 替换为另一个函数（例如： .css(...) ，效果很好。只有触发似乎被破坏了。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

只有一腔孤勇 2024-11-11 09:09:53

如何通过 jquery 模拟锚点点击？
检查此链接并查看
Stavanicus 的回答。

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

回复收藏 0 原文

乱了心跳 2024-11-11 09:09:53

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

回复收藏 0 原文

软的没边 2024-11-11 09:09:53

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

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

但这会..:)

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

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 原文

灼痛 2024-11-11 09:09:53

我认为这个演示不会工作，但它确实有效（Chrome 12）。它将提醒两条消息，每个点击事件一条消息。一个是由 jQuery 创建的，一个是本机的，但我认为只能触发 jQuery 事件。

编辑： 是的，click 不跟随 < code>href.

编辑2： 所以你要手动触发的事件实际上是由Prototype轮播插件创建的事件。对于下面的代码，我假设它是这个。如果是这种情况，为什么不能使用 Prototype 触发事件或本机......像这样：

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

此事件触发演示中有两个示例（其中一个已被注释掉，但您可以切换以获得相同的结果）。一种来自用 Prototype 触发事件，它使用 event.simulate.js 和一个使用 fakeClick() 函数href="https://stackoverflow.com/questions/1421584/how-can-i-simulate-a-click-to-an-anchor-tag/1421968#1421968">如何模拟对锚标记的点击？。其中任何一个在 Chrome 12 中都适合我。

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.