セレクタの変更に基づいてイベントのバインドを解除して再バインドする方法

これは、jqueryセレクタにバインドされたイベントリスナーがどのように処理されるかについての、より多くの学習課題です。セレクタの変更に基づいてイベントのバインドを解除して再バインドする方法

はので、私は次のコードを持っていると言う：1の最初のクリックで

<html> 
<div class = "one">one</div> 
<div class = "two">two</div> 
</html> 

<script> 
$(".one").click(function() { 
$(this).removeClass("one").addClass("two"); 
console.log("one"); 
}) 
$(".two").click(function() { 
console.log("two"); 
}) 

</script>

を、セレクタが有効でなくなった（クラスがあるとして、今2ではなく1の）。ただし、イベントはこの要素にバインドされています。この要素はすでにバインドされているため、 ".two"ハンドラも起動しません。

最初のクリックでハンドラをアンバインドしてから、後で再バインドする最も簡単な方法は何ですか？

出典

2016-08-05 Ash

イベントをバインドするdocumentで、イベントのバインドを解除して再バインドする必要はありません。

$(document).on("click", ".one", function() { 
 
    $(this).removeClass("one").addClass("two"); 
 
    console.log("one"); 
 
}); 
 

 
$(document).on("click", ".two", function() { 
 
    console.log("two"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="one">one</div> 
 
<div class="two">two</div>

出典

2016-08-05 09:52:05 eisbehr

をより網羅的な説明を見つけることができます..あなたは、このメソッドが機能する理由として、簡単な説明を与えることができますか？ – Ash

これは*ライブバインディング*であり、変更された要素や新しい要素に対しても機能します。これは静的な要素バインディングの方がダイナミックなので、繰り返しバインドする必要があります。 @灰 – eisbehr

$(".one").unbind("click"); 
$(".one").bind("click", fn);

イベントを削除するためにunbind()を使用することができるがbind()と追加（または上記のようにバインドさ）

https://jsfiddle.net/7yn7apte/無再結合

https://jsfiddle.net/7yn7apte/1/再バインド

これはあなたの質問にお答えします。しかし、on()とoff()をbind()と呼び、on()とunbind()と呼び出す方がよいでしょう。off()です。

あなたは、これは本当に面白いです、ここでhttps://stackoverflow.com/a/9113835/6341631

出典

2016-08-05 10:38:48

セレクタの変更に基づいてイベントのバインドを解除して再バインドする方法

答えて

関連する問題