2016-08-21 6 views
1

下図のように、私はイベントリスナーの束を持って削除:は、イベントリスナーのグループ

<a id="target0" >target0</a> 

<div id="container"> 
    <a id="target1" >target1</a> 
    <a id="target2" >target1</a> 
    <a id="target3" >target1</a> 
    .. more targets with event listeners 
<script> 
    document.getElementById("#target1").addEventListener("click", ...); 
    document.getElementById("#target2").addEventListener("mouseover", ...); 
    document.getElementById("#target3").addEventListener("mouseout", ...); 
    ... 
</script> 

</div> 

<script> 
    document.getElementById("#target0").addEventListener("click", ...); 
</script> 

私は、関数を参照して(それらにバインドさイベントリスナーを持つすべてのDOM要素を殺す関数を書くにはどうすればよいですか匿名関数)はコンテナdiv内にありますか?

function killEvtListenersInsideContainerDiv(){ 
// loop to all DOM elements inside container that has event listeners and disable them 
} 

コンテナdivは、AJAXによって動的にロードされるため、内部のイベントリスナーは変更されます。唯一の「静的」はtarget0です。

答えて

0

あなたはONTコンテナ以上になります場合は、各aのクラス内でこのような何かを追加する必要があります。イベントを削除するには

<div> 
    <a class="container1" id="#target1"></a> 
    ... 
</div> 

を2つの方法があります、それは簡単に、より現代的なので、私は2番目のをお勧めします:

0123: 1)あなたには、いくつかの技術的な理由

var elements = document.getElementsByClassName("container1"); 
elements.forEach(function(elem, i, arr) { 
    element.removeEventListener("click"); 
}, this); 

2)jqueryのを使用するためにjqueryのを使用できない場合にのみ、ネイティブJavaScriptを使用します

UPDATE:あなたはこの

javascriptのクラスの使用を追加することができない場合は、次の

var elements = document.querySelector('#idDiv a'); //or '.classId a' 
elements.forEach(function(elem, i, arr) { 
element.removeEventListener("click"); 
}, this); 

jqueryのを

$('#idDiv a).click(function(){}); 

イベントが以前に設定されているかどうかを確認する方法はありません本当に必要な場合は、この機能を手で実装する必要があります(たとえば、フラグを使用)。関数が既に存在する場合、新しい関数は常に以前の関数をオーバーライドします。 99.9%のケースでは十分です。

+0

これはクールだ!レスポンスありがとう。私はクラス "コンテナ*"を追加できない場合はどうしますか? div内のコンテンツは、私が制御できる他のビューからのものです。どのようにこれを変更してループし、イベントリスナーを持っているかどうかをチェックします。 – user6741031

+0

@ user6741031更新 – Nikita

関連する問題