jQuery 单击一个按钮触发另一个按钮的单击事件

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/20707999/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 01:16:13  来源:igfitidea点击:

Clicking on one button to trigger click event on another

jqueryjquery-on

提问by Yarin

I want to click on button 2 to trigger a click event on button 1.

我想单击按钮 2 以触发按钮 1 上的单击事件。

However, when I try the following, nothing happens when clicking on #2: no alert for #1 or #2.

但是,当我尝试以下操作时,单击 #2 时没有任何反应:#1 或 #2 没有警报。

HTML:

HTML:

<div id="container">
<button id="button-1">Button 1</button>
<button id="button-2">Button 2</button>
</div>

JS:

JS:

$('#container').on( "click", '#button-1', function(e){
    alert('CLICKED 1');
});
$('#container').on( "click", '#button-2', function(e){
    $('#button-1').trigger(e);
    alert('CLICKED 2');
});

http://jsfiddle.net/8RnBf/7/

http://jsfiddle.net/8RnBf/7/

Moreover, if I put the #2 alert before the trigger, I end up with an infinite loop.

此外,如果我将 #2 警报放在触发器之前,我最终会陷入无限循环。

http://jsfiddle.net/8RnBf/6/

http://jsfiddle.net/8RnBf/6/

Why is this not working as expected?

为什么这不能按预期工作?



UPDATE:

更新:

I should have made it clear: the original event must be passed. In essence, we're trying to do what was done here, but with delegated events

我应该说清楚:原始事件必须通过。本质上,我们正在尝试做这里所做的事情,但使用委托事件

回答by Krishna

Use

$('#button-1').trigger('click');

or

或者

$('#button-1').trigger(e.type);

http://jsfiddle.net/8RnBf/17/

http://jsfiddle.net/8RnBf/17/

instead of

代替

$('#button-1').trigger(e);

JSFIDDLE DEMO

JSFIDDLE 演示

Read about jquery .trigger() here

在此处阅读有关 jquery .trigger() 的信息

回答by adeneo

To properly trigger a delegated event you have to create an event object and pass it to trigger()

要正确触发委托事件,您必须创建一个事件对象并将其传递给 trigger()

$('#container').on( "click", '#button-2', function(e){
    var event = jQuery.Event(e.type);
    event.target = $('#button-1').get(0);

    $('#container').trigger(event);
});

FIDDLE

小提琴

That way you're actually triggering the event on the element it was bound to, passing the selector the delegated event handler will filter on as the event.target, so it will fire just as it would if the element was actually clicked.

这样,您实际上是在它绑定到的元素上触发事件,将选择器传递给委托的事件处理程序将过滤为event.target,因此它会像实际单击元素一样触发。

Or you could use the original event if you change the event.target

或者,如果您更改 event.target,则可以使用原始事件

$('#container').on( "click", '#button-1', function(e){
    alert('CLICKED 1');
});

$('#container').on( "click", '#button-2', function(e){
    e.target = $('#button-1').get(0);
    $('#container').trigger(e);
});

回答by Kapil Rupavatiya

When you need to call click event of any button then syntax is as below

当您需要调用任何按钮的点击事件时,语法如下

$('selector').trigger(event);

selector -> which tag's event you need to fire

选择器 -> 您需要触发哪个标签的事件

event -> which event you need to fire

事件 -> 您需要触发哪个事件

In your case you need to change following one line

在您的情况下,您需要更改以下一行

$('#button-1').trigger(e);

here you need pass event of e like click event, select event, etc.

在这里,您需要传递 e 事件,例如单击事件、选择事件等。

so solution is replace this line with any of the following line

所以解决方案是用以下任何一行替换这一行

$('#button-1').trigger(e.type); 

$('#button-1').trigger("click");