Question

我使用ajax调用某些表单，然后为每个按钮绑定一个事件处理程序。问题是......当我使用ajax调用一个新表单时，会再次为新元素调用事件处理程序，然后为前面的元素添加两次。如何检测事件处理程序是否已经在元素上并且不再绑定它？

function x(){
    $("input:button").click(function(){
        alert('is this called once?');
    });
}

<input type='button' value='Disable me' />
<input type='button' value='Disable me' />

function x(){
    $("input:button").click(function(){
        alert('is this called once?');
    });
}

// calling event twice simulating an ajax calling:
x();
x();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='button' value='Disable me' />
<input type='button' value='Disable me' />

Answer 1

执行此操作的一种方法是使用jQuery的off函数删除附加的任何事件，然后附加它。

这确保只有一个点击事件附加到元素。

示例代码段：

function x() {
  $("input:button").off('click').on('click', function() {
    console.log('is this called once?');
  });
}

// calling event twice simulating an ajax calling:
x();
x();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='button' value='Disable me' />
<input type='button' value='Disable me' />

Answer 2

每次调用AJAX请求时，是否真的需要重新添加click处理程序？如果没有，请考虑修改您的代码：

＆＃13;

//Only call this once; new buttons will still trigger it
$(document).on('click', 'input:button', function() {
    alert('is this called once?');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='button' value='Disable me' />
<input type='button' value='Disable me' />

＆＃13;

通过将处理程序附加到文档并提供选择器（'input:button'），该功能仅在单击按钮时触发，但会自动应用于初始绑定后添加的任何新按钮。

如果已经绑定了事件处理程序，请不要绑定它

2 个答案: