blocks|key|164509|text|您需要使用jQuery('#bar')[0].click();+to+simulate+a+mouse+click+on+the+actual+DOM+element+(而不是jQuery对象)，而不是使用.trigger()+jQuery方法。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|164510|注意:+DOM+Level+2+.click()不能在some+elements+in+Safari上工作。您需要使用一种变通方法。|164511|http://api.jquery.com/click/|164512|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.click|1|https://stackoverflow.com/questions/12925153/jquery-click-works-on-every-browser-but-safari|2^0|5|Q|2V|A|W|1F|0|0|G|8|R|N|1|0|0|S|2|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|F|3|G|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@$9|15|A|16|1|17]]|E|$]]|$1|H|3|I|5|6|7|18|8|@]|D|@$9|19|A|1A|1|1B]]|E|$]]|$1|J|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]|R|$5|M|N|O|E|$P|S]]|T|$5|M|N|O|E|$P|I]]]]

You need to use <code>jQuery('#bar')[0].click();</code> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.click" rel="noreferrer">to simulate a mouse click on the actual DOM element</a> (not the jQuery object), instead of using the <code>.trigger()</code> jQuery method.

Note: DOM Level 2 <code>.click()</code> doesn't work on <a href="https://stackoverflow.com/questions/12925153/jquery-click-works-on-every-browser-but-safari">some elements in Safari</a>. You will need to use a workaround.

<a href="http://api.jquery.com/click/" rel="noreferrer">http://api.jquery.com/click/</a>

blocks|key|2975557|text|在像这样做.click()之前，你只需要放一个小的超时事件：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2975558|setTimeout(function(){+$('#btn').click()},+100);|code-block|syntax|javascript|2975559|entityMap^0|5|8|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

You just need to put a small timeout event before doing <code>.click()</code>
like this : 

<pre><code>setTimeout(function(){ $('#btn').click()}, 100);
</code></pre>

blocks|key|165556|text|这是JQuery行为。我不确定为什么它是这样工作的，它只触发链接上的onClick函数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|165557|尝试：|165558|jQuery(document).ready(function()+{
++++jQuery('#foo').on('click',+function()+{
++++++++jQuery('#bar')[0].click();
++++});
});|code-block|syntax|javascript|165559|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

This is JQuery behavior. I'm not sure why it works this way, it only triggers the onClick function on the link.

Try:

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

blocks|key|168391|text|请看我的演示：http://jsfiddle.net/8AVau/1/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|168392|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!
++++++++}
++++});
}|code-block|syntax|javascript|168393|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/8AVau/1/^0|7|S|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

See my demo: <a href="http://jsfiddle.net/8AVau/1/">http://jsfiddle.net/8AVau/1/</a>

<pre><code>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!
 }
 });
}
</code></pre>

blocks|key|2762694|text|可能会很有用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2762695|在事件被调用之后，调用触发器的代码应该为。|offset|length|style|BOLD|2762696|例如，我有一些代码希望在更改#expense_tickets值时以及重新加载页面时执行|2762697|$(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");

})|code-block|syntax|javascript|2762698|entityMap^0|0|K|1|0|0|17|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@$D|S|E|T|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|U|8|@$D|V|E|W|F|G]]|9|@]|A|$]]|$1|J|3|K|5|L|7|X|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|P|$]]

May be useful: 

The code that calls the Trigger should go after the event is called.

For example, I have some code that I want to be executed when #expense_tickets value is changed, and also, when page is reload

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

})
</code></pre>

blocks|key|166637|text|jQuery的.trigger('click');只会在这个事件上触发一个事件，它也不会触发默认的浏览器操作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|166638|您可以使用以下JavaScript模拟相同的功能：|166639|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;
++++}
});|code-block|syntax|javascript|166640|entityMap^0|7|I|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

jQuery's <code>.trigger('click');</code> will only cause an event to trigger on this event, it will not trigger the default browser action as well.

You can simulate the same functionality with the following JavaScript:

<pre><code>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;
 }
});
</code></pre>

blocks|key|168418|text|试试这个对我有效的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|168419|$('#bar').mousedown();|code-block|syntax|javascript|168420|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try this that works for me:

<pre><code>$('#bar').mousedown();
</code></pre>

blocks|key|2762737|text|从技术上讲，这不是一个答案，但很好地利用接受答案(https://stackoverflow.com/a/20928975/82028)为jQuery+ACF字段上的选项卡创建下一个和上一个按钮：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2762738|$('.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();
});|code-block|syntax|javascript|2762739|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/20928975/82028^0|P|16|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Technically not an answer to this, but a good use of the accepted answer (<a href="https://stackoverflow.com/a/20928975/82028">https://stackoverflow.com/a/20928975/82028</a>) to create next and prev buttons for the tabs on jQuery ACF fields: 

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

blocks|key|166705|text|我已经尝试了前两个答案，直到我从我的文件输入元素中删除了"display:none“，它才对我起作用。然后我又回到了.trigger()，它在windows的safari上也是有效的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|166706|所以结论是，不要使用display:none；要隐藏文件输入，可以使用：0。|offset|length|style|BOLD|166707|entityMap^0|0|Z|3|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

I have tried top two answers, it doesn't worked for me until I removed "display:none" from my file input elements.
Then I reverted back to .trigger() it also worked at safari for windows.

So conclusion, Don't use display:none; to hide your file input , you may use opacity:0 instead.

blocks|key|2975561|text|只需使用以下命令：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2975562|$(function()+{
+$('#watchButton').trigger('click');
});|code-block|syntax|javascript|2975563|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Just use this:
<pre><code>$(function() {
 $('#watchButton').trigger('click');
});
</code></pre>

blocks|key|2762666|text|你不能用javascript模拟一个click事件。单击函数只会在元素上触发一个名为“.trigger()”的事件，您可以使用.on()+jQuery方法捕获该事件。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2762667|entityMap^0|17|A|1R|5|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

You can't simulate a click event with javascript.
jQuery <code>.trigger()</code> function only fires an event named "click" on the element, which you can capture with <code>.on()</code> jQuery method.

I'm having a hard time understand how to simulate a mouse click using JQuery. Can someone please inform me as to what i'm doing wrong.

HTML:

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

jQuery:

<pre><code>jQuery('#foo').on('click', function(){
 jQuery('#bar').trigger('click');
});
</code></pre>

Demo: <a href="http://jsfiddle.net/8AVau/" rel="noreferrer">FIDDLE</a> 

when I click on button #foo I want to simulate a click on #bar however when I attempt this, nothing happens. I also tried <code>jQuery(document).ready(function(){...})</code> but without success.

How to get JQuery.trigger('click'); to initiate a mouse click

jQuery

我很难理解如何使用JQuery来模拟鼠标点击。有人能告诉我我哪里做错了吗？HTML：<a id="bar" href="http://stackoverflow.com" target="_blank">Don't click me!</a>Click me!jQuery：jQuery('#foo').on('click', function(){

问How to get click (‘JQuery.trigger’)；启动鼠标点击
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问How to get click (‘JQuery.trigger’)；启动鼠标点击EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问How to get click (‘JQuery.trigger’)；启动鼠标点击
EN