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/

为什么这不按预期工作？

更新

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

Answer 1

使用

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

或

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

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

而不是

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

<强> JSFIDDLE DEMO

了解jquery .trigger() here

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

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

Answer 3

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

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

选择器 - ＆gt;你需要解雇哪个标签事件

事件 - ＆gt;你需要解雇哪个事件

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

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

这里你需要传递e事件，如点击事件，选择事件等。

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

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

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

单击一个按钮可在另一个按钮上触发单击事件

3 个答案: