jqueryクラスセレクタは、クラスの最初の要素にイベントを登録しています

Question

現在jqueryのフォームフィールドハイライターで作業していますが、これまではフォームの最初の行でのみ動作し、残りのフィールドはmy私は 私は現在、次のjqueryのコードを使用しています

var debug = false; 




    $(function(){ 

     $(".email-form tbody:last").AddFormLineToTable(); 

     $("#do-add-row").click(function() { 

      if(debug) 
      { 
       alert("serialize click eventhandler fired"); 
      } 

      $(".email-form tbody:last").AddFormLineToTable(); 
     }); 



     $(".does-focus-highlight").focusin(function(e){ 

      $(e.target).addClass("focus-highlight"); 
      if(debug){alert('field did focus');} 
     }); 
     $(".does-focus-highlight").focusout(function(e){ 
      $(e.target).removeClass("focus-highlight"); 
      if(debug){alert('field did blur');} 

     }); 


     $("#do-serialize").click(function(){ 
      if(debug) 
      { 
       alert("serialize click eventhandler fired"); 
      } 
      var jsn = $("#contact-form").serializeArray(); 
     $("#serialize-target").val(JSON.stringify(jsn,null,2)); 



     }); 



    }); 

をフォーマットフォーカスを適用することができるようにフォーカスイベントを発射されていないフォームフィールドがあればdunamically同様に生成されている これらの追加イベントをキャッチするために欠けている何かイムがありますそれは次のように生成されている でも差をつけます

var lineCount = 0; 

jQuery.fn.AddFormLineToTable = function() { 
    var o = $(this[0]); 
    o.append('<tr id="contact-'+lineCount+'">' + 
     '<td>Name: <input class="does-focus-highlight" id="contact-name-'+lineCount+'" name="contact-name-'+lineCount+'" type="text" required="required" /></td>' + 
     '<td>Email: <input class="does-focus-highlight" id="contact-email-'+lineCount+'" name="contact-email-'+lineCount+'" type="email" required="required" /></td>' + 
     '</tr>'); 

    lineCount++; 
}; 

Answer 1

.click()は、.click()の呼び出し時に存在していた要素にのみイベントをバインドします。後で作成される要素のイベントを処理する場合は、使用しているjQueryのバージョンに応じて、.on()または.live()を使用します。非常に役立つ情報hereを読んでください。