jQueryでの将来の要素バインドイベント

2762 ワード

将来の要素バインドイベントにbindは使用できません.
1、liveで代用できますが、jqueryのバージョンに注意してください.公式ドキュメントによると、1.7からliveやdelegateはお勧めしません.1.9でliveは削除されます.
2、onで代用することをお勧めします(注:1.7以上のバージョンでサポートされています).使用法:on(events,[selector],[data],fn)
//  $(function(){})    

$(document).on("click", "#testDiv", function(){

//   $(this) $( "#testDiv"),  $(document)

});

3、一致する各要素の特定のイベント(clickなど)に対して1回限りのイベント処理関数をバインドしたい場合に用いる.one()はonの代わりにすればよいので,すべての[selector]で1回実行できるのではなく,これらの[select]で合計1回実行できることに注意し,将来の要素にも有効である.
4、あるdivに3つのボタンを追加削除してイベントをバインドする必要がある場合は、次のように書きます.
$('#btn-add').click(function(){});

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

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

このように書くデメリット:三者の構造的なつながりが見えず、イベントを利用して泡を立てていない.
CoffeeDeveloperのjQueryのイベントバインドに対するいくつかの思考が推奨する方法を見てみましょう.
$("#btnContainer").coffee({

  click: {

           "#btn-add":  function(){ //do something },

           "#btn-del":   function(){ //do something },

            "#btn-edit": function(){ //do something }

   } ,

   mouseenter:{

             "#btn-abc":  function(){ //do something }, 

   }

});        

このように書くのはずっときれいではありませんか.(.coffee()はカスタムの関数ですが、自分でこの関数を書くことができますか.)ただバインドされたfunctionが長ければ、コードが少し乱れているような気がして、コメントの中の
$('#btnContainer')

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

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

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

この書き方も上記の2つのデメリットを避け、乱れていないように見えます.