点击一个按钮触发另一个按钮的点击事件

Question

我希望通过点击按钮2来触发按钮1的点击事件。

然而，当我尝试以下操作时，点击#2时不会发生任何事情：没有#1或#2的警报。

HTML:

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

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/

此外，如果我在触发器之前放置 #2 警报，就会导致无限循环。

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

为什么这不像预期的那样工作？

---

更新：

我应该说明：必须传递原始事件。本质上，我们正在尝试做的是 这里 所做的事情，但使用委托事件。

- Yarin

Answer 1

使用

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

或者

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

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

替代

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

JSFIDDLE演示

在这里阅读有关jQuery .trigger()的信息。

- Venkata Krishna

---

OP已经将click event对象传递到了trigger，我认为这不是问题所在。 - Rory McCrossan

不，我们需要传递原始事件，抱歉之前没有表达清楚。 - Yarin

@RoryMcCrossan - 或者可以使用 event.type 来触发它。 - Venkata Krishna

@Yarin - 使用 e.type 触发原始事件。 - Venkata Krishna

Answer 2

为了正确触发委托事件，您需要创建一个事件对象并将其传递给 trigger()。

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

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

代码演示

这样做实际上是在绑定的元素上触发事件，将选择器作为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);
});

- adeneo

Answer 3

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

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

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

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

在您的情况下，您需要更改以下一行代码

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

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

因此，解决方案是将此行替换为以下任何一行

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

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

- Kapil Rupavatiya