既にバインドされている場合はイベントハンドラをバインドしない

Question

私はajaxを使用していくつかのフォームを呼び出してから、各ボタンのイベントハンドラをバインドします。問題は...私はajaxを使用して新しいフォームを呼び出すと、新しい要素に対してイベントハンドラが再度呼び出され、前の要素に対して2回追加されます。イベントハンドラが既に要素上にあり、再度バインドしていないかどうかを検出するにはどうすればよいですか？これを行うには

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リクエストが呼び出されるたびに再追加する必要がありますか？ない場合は、そのようなあなたのコードを改訂検討してください。文書にハンドラをアタッチし、セレクタ（'input:button'）を供給することにより

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

、機能はボタンのみをクリックしたときにトリガしますが、自動的に初期バインディング後に追加された新しいボタンに適用されます。

Answer 2

一つの方法は、接続されているすべてのイベントを削除し、それを添付するのjQueryのoff機能を使用しています。

これは、要素にクリックイベントが1つだけ接続されていることを確認します。

例スニペット：

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