触发单击 jquery 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5867370/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Trigger click jquery not working
提问by Riccardo
I'm figuring out why this simple script is not working:
我正在弄清楚为什么这个简单的脚本不起作用：
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery('.next_button a').trigger('click');
});
noConflictis necessary because I also load prototype/scriptaculous in this page.
noConflict是必要的，因为我还在此页面中加载了原型/scriptaculous。
If I replace .trigger('click')with another function (es: .css(...)this works well. Only triggering seems to go broken.
如果我.trigger('click')用另一个函数替换（es：.css(...)这很好用。只有触发似乎坏了。
回答by A Bright Worker
How can I simulate an anchor click via jquery?Check this link and see this answer by Stevanicus.
如何通过 jquery 模拟锚点点击？检查此链接并查看 Stevanicus 的答案。
$('a#swaswararedirectlink')[0].click();
$('a#swaswararedirectlink')[0].click();
回答by Gary Green
You can only trigger a click that jQuery has created. It's one of jQuery's cute little quirks.
您只能触发 jQuery 创建的点击。这是 jQuery 可爱的小怪癖之一。
回答by keithics
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');
回答by andyb
I thought that this demowould not work but it does (Chrome 12). It will alerttwo 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.
我认为这个演示不起作用，但它确实有效（Chrome 12）。它将有alert两条消息，每个单击事件一条消息。一种是由 jQuery 创建的，一种是原生的，但我认为只能触发 jQuery 事件。
Edit:Yes the clickdoes not follow href.
编辑：是的click不遵循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 eventusing Prototype or natively… like this:
编辑 2：所以您要手动触发的事件实际上是由 Prototype carousel 插件创建的事件。对于下面的代码，我假设它是这个。如果是这种情况，为什么不能使用 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>
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 Prototypewhich uses event.simulate.jsand 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.
在这个事件触发的演示中有两个例子（一个被注释掉了，但你可以切换到相同的结果）。一个来自Trigger an event with Prototypewhich usedevent.simulate.js和一个使用fakeClick()来自如何模拟对锚标记的点击的功能？. 在 Chrome 12 中，其中任何一个都对我有用。
