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

Question

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

演示：小提琴

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

Answer 1

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

注意：DOM Level 2 .click()不适用于 Safari 中的某些元素。 您将需要使用一种解决方法。

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

Answer 2

您只需要在执行.click()之前放置一个小的超时事件，如下所示：

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

Answer 3

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

尝试：

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

Answer 4

看我的演示： 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!
        }
    });
}

Answer 5

可能有用：

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

例如，我有一些代码希望在 #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");

})

Answer 6

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

Answer 7

试试这个对我有用：

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

Answer 8

我已经尝试了前两个答案，直到我从我的文件输入元素中删除了“display:none”，它才对我有用。 然后我恢复到 .trigger() 它也适用于 Windows 的 safari。

所以结论，不要使用 display:none; 要隐藏您的文件输入，您可以使用 opacity:0 代替。

Answer 9

从技术上讲，这不是一个答案，而是很好地利用已接受的答案 ( 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();
});

Answer 10

只需使用这个：

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

Answer 11

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