单击一个按钮以触发另一个按钮的单击事件答案

【问题标题】：Clicking on one button to trigger click event on another单击一个按钮以触发另一个按钮的单击事件
【发布时间】：2013-12-20 16:32:46
【问题描述】：

我想点击按钮 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/

为什么这没有按预期工作？

更新：

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

【问题讨论】：

标签： jquery jquery-on

【解决方案1】：

使用

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

或

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

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

而不是

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

JSFIDDLE DEMO

阅读 jquery .trigger() here

【讨论】：

OP 已经将点击event 对象传递给trigger，我认为这不是问题。
不，我们需要通过 orig 事件，抱歉没有说清楚
@RoryMcCrossan - 或event.type 也可以用来触发它。
@Yarin - 使用e.type 触发原始事件。

【解决方案2】：

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

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

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

FIDDLE

这样你实际上是在它绑定的元素上触发事件，传递选择器，委托事件处理程序将过滤为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);
});

【讨论】：

【解决方案3】：

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

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

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

event -> 你需要触发哪个事件

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

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

这里需要传递e的事件，比如点击事件、选择事件等

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

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

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

【讨论】：