如果绑定事件处理程序已绑定

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

是否单击处理程序实际上需要重新添加每次你的AJAX请求被调用时？如果不考虑修改像这样的代码：

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

<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' />

通过处理程序连接到文件并提供一个选择器（'input:button'），功能按钮上点击时才会触发，可自动将应用于初始绑定后添加的任何新按钮。

Answer 2

一种方法是使用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' />