Question

我有一个结帐表单，使用php加载一些javascript＆amp;页面加载时html进入#Div-A。 javascript将点击事件绑定到同一div中的#Button-A。像这样：

<div id="#Div-A"><input type="button" id="Button-A"/>
<script type="text/javascript">
    $('#Button-A').bind('click', function() {
    $.ajax({ 
        type: 'get',
        url: 'some/url/gets/called',
        success: function() { this happens on success }     
    });
});</script>
</div>

之后，#Global-Button被创建，javascript函数将不同的点击事件绑定到第二个按钮，然后触发#Button-A点击，如下所示：

$('#Global-Button').live('click', function(event) {
    $("#Button-A").trigger("click");
})

原因是#Div-A的内容可以更改（通过ajax），因此第二个按钮充当全局触发器，无论#Div-A中出现哪个按钮或函数。

我遇到的问题是，出于某种原因，如果在页面加载#Button-A被触发两次后点击了＃Global-Button。如果一个Ajax事件重新加载＃Div-A的内容，那么一切都很好，触发只发生一次。

我在通过Ajax重新加载之前和之后检查了#Div-A中的html，一切看起来都是一样的。在我看来，肯定没有任何重复的按钮或功能会导致触发两个事件。

我对DOM知之甚少，只能猜测这与加载内容和绑定事件的顺序有关。

Answer 1

始终建议您使用＆＃39;取消绑定＆＃39;在绑定之前确保事件没有多次绑定。在您的情况下，可能有两种可能性 -

＆＃39;＃全局按钮＆＃39; click函数被绑定两次。
＆＃39;＃按钮-A＆＃39;点击功能绑定两次＆＃39; #Global-Button＆＃39;实际上是触发了一次点击。

将代码更改为 -

$('#Global-Button').unbind('click').bind('click', function(event) {
    $("#Button-A").trigger("click");
})

并且 -

$('#Button-A').unbind('click').bind('click', function() {
    $.ajax({ 
        type: 'get',
        url: 'some/url/gets/called',
        success: function() { this happens on success }     
    });
});

Answer 2

不要使用.live。不建议使用Live，而不是

每次点击＃Blobal-Button，你都会点击一下点击事件。所以你需要在使用之前关闭它

使用.off删除事件处理程序

$('#Global-Button').off('click');
$('#Global-Button').on('click', function(event) {
    $("#Button-A").trigger("click");
})

Answer 3

您也可以使用

 $(".selector").on("click", function (**e**) {
  **e**.stopImmediatePropagation();//use to stop click twice or more
})

jQuery触发单击触发器两次

3 个答案: