如何获取JQuery.trigger('click'); 启动鼠标单击


145

我很难理解如何使用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');
});

演示:FIDDLE

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


2
jQuery trigger仅在添加任何“ jQuery click”事件时有效。否则,您将无法通过这种方式做任何事情;
Reza Mamun 2014年

3
这是浏览器中内置的安全措施。参见@Blazemonger的答案:stackoverflow.com/questions/7999806/…–
sanchez

1
@ san.chez有趣的是,感谢您提供的信息,以前不知道此安全措施!
lickmycode 2014年

Answers:


277

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

注意:DOM Level 2 在Safari中的某些元素.click()上不起作用。您将需要使用解决方法。

http://api.jquery.com/click/


18
您保存了我的一天$('#asd')[0] .click();
waza123 '16

使用它来单击jQuery ACF字段上的下一个选项卡:$('。next')。click(function(){$('#primary li.active')。next()。find('。acf-tab-button ')[0] .click();});
Tisch

1
谢谢。它可以在桌面上运行。但是在移动设备(Android chrome)上却没有。有什么建议?
kk-dev11 '16

由于某种原因,这会破坏当前URL中的哈希。
luis

1
如果<a标记上的href之一是“#”,则可以这样做。<a通常重定向到另一个URL。在单击处理程序返回之前,必须使用ev.preventDefault()和ev.stopPropagation()停止它。或者,使用<a;以外的其他标签。您可以将点击处理程序附加到可见的任何内容。
OsamaBinLogin


33

这是JQuery行为。我不确定为什么会这样,它只会触发链接上的onClick函数。

尝试:

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

感谢您的解释。jQuery的行为非常令人讨厌,但是您的代码有效。
lickmycode 2014年

一点也不烦人。trigger()用于执行click事件JavaScript部分。这与创建function var() {}多次重复使用的多数民众赞成非常相似。

21

参见我的演示: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!
        }
    });
}

我会把它包装this.click();else if(this.click)
Alex W

15

可能有用:

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

例如,当#expense_tickets值更改时,以及重新加载页面时,我要执行一些代码

$(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");

})

4
啊,那也是我的问题!对于为什么它trigger()不起作用感到困惑。事实证明,我在调用的函数上方设置了触发代码-因此该钩子实际上并未安装到位。h!
Andrew Newby

5

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;
    }
});

2

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

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

0

我已经尝试了前两个答案,但是直到我从文件输入元素中删除了“ display:none”后,该方法才对我有用。然后我又回到了.trigger(),它在Windows的Safari浏览器中也起作用。

所以结论,不要使用display:none; 要隐藏文件输入,可以改用opacity:0。


0

从技术上讲,这不是答案,而是充分利用已接受的答案(https://stackoverflow.com/a/20928975/82028)为jQuery ACF字段上的标签创建下一个和上一个按钮:

$('.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();
});

0

只需使用此:

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

-3

您无法使用javascript模拟点击事件。jQuery .trigger()函数仅在元素上触发一个名为“ click”的事件,您可以使用.on()jQuery方法捕获该事件。


9
“您无法使用javascript模拟点击事件” - 是的,您可以
nnnnnn 2014年

错误...您可以使用javascript / jquery模拟click事件,并且可以使用.click来捕获触发click事件,而无需启用。
Aerious
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.