jQuery触发单击触发器两次

Question

我有一个结帐表单,使用PHP加载#Div-A页面加载时的一些JavaScript和HTML .javascript将click事件绑定到#Button-A同一个div中.像这样的东西:

<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的内容,那么一切都很好,触发器只发生一次.

我在#Div-A通过Ajax重新加载之前和之后检查了html ,一切看起来都是相同的.据我所知,在任何地方都没有重复的按钮或功能会导致触发两个事件.

我只知道关于DOM的一点点,并且只能猜测这与加载事物和绑定事件的顺序有关.

Answer 1

始终建议在绑定之前使用'unbind'以确保事件未多次绑定.在您的情况下,可能有两种可能性 -

1. '#Global-Button'点击功能绑定两次.
2. '#Button-A'点击功能绑定两次,'#Global-Button'实际上触发点击一次.

改变您的代码,如 -

$('#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

你也可以使用

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

Answer 3

不要用.live.不赞成使用Live

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

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

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