jQuery では、bind、live、または on_jquery を使用して、将来の要素イベントをバインドします。-jsチュートリアル-php.cn

jQuery では、bind、live、または on_jquery を使用して、将来の要素イベントをバインドします。

WBOY

リリース： 2016-05-16 16:51:58

オリジナル

1070 人が閲覧しました

今後の要素バインディングイベントにはバインドを使用できません。

1. 代わりに live を使用できますが、公式ドキュメントによると、live と delegate は 1.7 以降では推奨されません。 1.9 ライブでは削除される予定です。

2. 代わりに on を使用することをお勧めします (注: バージョン 1.7 以降でのみサポートされます)。使用法: on(events,[selector],[data],fn)

コードをコピーコードは次のとおりです:

 
//$(function(){})
$(document).on("click", "#testDiv", function(){ 
 に配置された場合にのみ有効です//ここで、$(this) は、$(document) 
}) ではなく、$( "#testDiv") を指します。 

3. それぞれに特定のイベントのみを生成したい場合一致する要素 ( click など) 1 回限りのイベント処理関数をバインドするときは、 on の代わりに .one() を使用します。これはすべての [selector] に対して 1 回だけ実行されるのではなく、これらの [selects] に対しても 1 回だけ実行されることに注意してください。将来の要素にも有効です。

4. イベントにバインドする必要がある div に追加、削除、または変更の 3 つのボタンがある場合は、次のように記述します:

コードをコピーしますコードは次のとおりです。

 
$('#btn-add').click(function(){}); '#btn-del').click (function(){}); 
$('#btn-edit').click(function(){});

このように書くと、3 つの構造的接続の違いがわかりません。イベントが発生する理由もありません。

jQuery イベントバインディングに関するいくつかの考え方について、CoffeeDeveloper の推奨事項を見てみましょう。

コードをコピーコードは次のとおりです。

$("#btnContainer").coffee({ 
click: { 
"#btn-add": function(){ //何かをする }, 
"#btn-del": function(){ //何かをする }, 
"#btn-edit": function(){ //何かをする } 
} , 
 Mouseenter:{ 
"#btn-abc": function(){ //何かをする }, 
} 
}); 

 

このように書くと、見た目はかなり良くなったと思いませんか? (.coffee() はカスタム関数です。この関数を自分で書くことはできますか?)、バインドされた関数が比較的長い場合、コードはまだ少し乱雑に感じられます。

コードをコピーしますコードは次のとおりです:

$('#btnContainer')

.on ('click','# btn-add', function(){}) 
.on('click','#btn-del', function(){}) 
.on('click' ,'#btn-edit' ,function(){}); 

 
この書き方では、上記の 2 つの欠点も回避され、見た目も煩雑になりません。