javascript - jQuery 触发器点击触发两次

Question

我有一个结帐表单，它在页面加载时使用 php 将一些 javascript 和 html 加载到 #Div-A 中。 javascript 将点击事件绑定(bind)到同一 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 函数将不同的点击事件绑定(bind)到第二个按钮，然后触发 #Button-A 像这样被点击:

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

原因是 #Div-A 的内容可以更改(通过 ajax)，因此无论哪个按钮或功能恰好位于 中，第二个按钮都充当全局触发器#Div-A.

我遇到的问题是，由于某种原因，如果在页面加载后单击#Global-Button #Button-A 会触发两次。如果 Ajax 事件重新加载了#Div-A 的内容，那么一切都很好，触发器只发生一次，这是它应该发生的。

我检查了通过 Ajax 重新加载前后 #Div-A 中的 html，一切看起来都一样。据我所知，绝对没有重复的按钮或功能会导致触发两个事件。

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

Answer 1

始终建议在绑定(bind)之前使用“解除绑定(bind)”，以确保事件不会被多次绑定(bind)。在你的情况下，可能有两种可能性 -

1. '#Global-Button'点击功能绑定(bind)了两次。
2. “#Button-A”点击功能绑定(bind)了两次，“#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 }     
    });
});