如何让 JQuery.touch (‘ click’) ; 启动鼠标单击

我很难理解如何使用 JQuery 模拟鼠标单击。有人能告诉我我做错了什么吗。

HTML:

<a id="bar" href="http://stackoverflow.com" target="_blank">Don't click me!</a>
<span id="foo">Click me!</span>

JQuery:

jQuery('#foo').on('click', function(){
jQuery('#bar').trigger('click');
});

演示: < strong > FIDDLE

当我点击按钮 # foo 时，我想模拟点击 # bar，但是当我尝试这样做时，什么也没有发生。我也尝试了 jQuery(document).ready(function(){...})，但没有成功。

262970 次浏览
小开

JQuery 的 .trigger('click');只会在这个事件上触发一个事件，它也不会触发默认的浏览器操作。

你可以用下面的 JavaScript 模拟相同的功能:

jQuery('#foo').on('click', function(){
var bar = jQuery('#bar');
var href = bar.attr('href');
if(bar.attr("target") === "_blank")
{
window.open(href);
}else{
window.location = href;
}
});
小开

这是 JQuery 的行为。我不知道它为什么这样工作，它只触发了链接上的 onClick 函数。

试试:

jQuery(document).ready(function() {
jQuery('#foo').on('click', function() {
jQuery('#bar')[0].click();
});
});
小开

你不能用 javascript 模拟 click 事件。 JQuery.trigger()函数只在元素上激发一个名为“ click”的事件，可以使用 .on()jQuery 方法捕获该事件。

小开
最佳答案

您需要使用 jQuery('#bar')[0].click(); 模拟鼠标单击实际的 DOM 元素(而不是 jQuery 对象) ，而不是使用 .trigger() jQuery 方法。

注意: DOM Level 2 .click()不能在 Safari 中的一些元素上工作。您需要使用变通方法。

Http://api.jquery.com/click/

小开

请看我的演示: http://jsfiddle.net/8AVau/1/

jQuery(document).ready(function(){
jQuery('#foo').on('click', function(){
jQuery('#bar').simulateClick('click');
});
});


jQuery.fn.simulateClick = function() {
return this.each(function() {
if('createEvent' in document) {
var doc = this.ownerDocument,
evt = doc.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, doc.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
this.dispatchEvent(evt);
} else {
this.click(); // IE Boss!
}
});
}
小开

可能有用:

调用触发器的代码应该调用 之后事件。

例如，我有一些代码，我希望在更改 # pensealticsvalue 和重新加载页面时执行这些代码

$(function() {


$("#expense_tickets").change(function() {
// code that I want to be executed when #expense_tickets value is changed, and also, when page is reload
});


// now we trigger the change event
$("#expense_tickets").trigger("change");


})
小开

我已经尝试了前两个答案，它不适合我，直到我删除“ display: none”从我的文件输入元素。 然后我返回到. touch () ，它也适用于 Safari 的窗口。

因此，结论，不要使用 display: none; 来隐藏文件输入，你可以使用不透明度: 0代替。

小开

试试这个对我有效的方法:

$('#bar').mousedown();
小开

从技术上讲，这不是一个问题的答案，但是它很好地利用了公认的答案(https://stackoverflow.com/a/20928975/82028) ，为 jQuery ACF 字段的选项卡创建了 next 和 prev 按钮:

$('.next').click(function () {
$('#primary li.active').next().find('.acf-tab-button')[0].click();
});


$('.prev').click(function () {
$('#primary li.active').prev().find('.acf-tab-button')[0].click();
});
小开

您只需要在执行 .click()之前设置一个小的超时事件 像这样:

setTimeout(function(){ $('#btn').click()}, 100);
小开

用这个:

$(function() {
$('#watchButton').trigger('click');
});

提交答案