如果綁定事件處理程序已綁定

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