Jqueryクラスが追加されていません

Question

フィールドにフォーカスするとフォームフィールド（クラスメードデザインのようなもの）にクラスを追加するスクリプトがあります。私のフォームでは、ユーザーがボタンをクリックできるようにする別のスクリプトを使用しますフィールドを追加してください。問題は、ボタンをクリックしたときに追加された他のフィールドは、クラスを追加する最初のスクリプトの影響を受けていないように見えるため、これらのフィールドに注目すると、クラスは適用されません。

これは私のHTMLコードです：

<form action="sendmail.php" class="form common_font" method="post"> 
    <div class="choosecontact"> 
     <div id="showfieldsem"> 
      <h4 class="parteciptitle">Partecipante principale</h4> 
      <div class="field inline-block name"> 
       <label for="input_type" class="field-label common_font regular medium_font_size form_color">Ente, Comune, Azienda</label> 
       <input id="input_type" name="TEXT" class="field-input" type="text" required> 
      </div> 
      <div class="field inline-block name"> 
       <label for="input_name" class="field-label common_font regular medium_font_size form_color">Nome Cognome</label> 
       <input id="input_name" name="TEXT" class="field-input" type="text" required> 
      </div> 
      <div class="field inline-block name"> 
       <label for="input_tel_sem" class="field-label common_font regular medium_font_size form_color">Numero di telefono</label> 
       <input id="input_tel_sem" name="TEXT" class="field-input" type="text" required> 
      </div> 

      <div id="emailsem" class="field inline-block email"> 
       <label for="input_email_sem" class="field-label common_font regular medium_font_size form_color">Indirizzo Email (consiglio: email personale che controlli)</label> 
       <input id="input_email_sem" name="EMAIL" class="field-input" type="EMAIL" required> 
      </div> 


      <div id="InputsWrapper" > 
      </div> 
      <div class="contbtnaddrempart"> 
       <a href="javascript:void(0)" id="AddMoreFileBox" class="btn btn-primary">Aggiungi Partecipante</a> 
       <a href="javascript:void(0)" id="RemoveMoreFileBox" class="btn btn-secondary" style="display:none">Reset</a> 
      </div> 



      <div class="field msg"> 
       <label for="input_msg_sem" class="field-label common_font regular medium_font_size form_color">Se vuoi, fai la tua domanda sul DPO</label> 
       <input id="input_msg_sem" name="TEXT" class="field-input" type="text"> 
      </div> 

      <div class="inline-block row"> 
       <div class="col-xs-2"> 
        <input id="input_privacycheck_sem" name="PRIVACYCHECK" class="privacycheck" type="checkbox" required> 
       </div> 
       <div class="col-xs-10"> 
        <label for="input_checkprivacy_sem" class="privacyconsent">Acconsento al trattamento dei dati personali come indicato nella Privacy Policy ai fini di questo servizio.</label> 
       </div> 
      </div> 

      <button type="submit" class="send-btn center common_element_color common_font medium body_font_size white"><span class="fa fa-chevron-right"></span> Invia richiesta</button> 
     </div> 
    </div> 
</form> 

そして、それらは私のスクリプトです：

/*--------------------------- 
    add/remove partecipanti 
----------------------------*/ 
var InputsWrapper = $("#InputsWrapper"); 
var AddButton = $("#AddMoreFileBox"); 
var RemoveButton = $("#RemoveMoreFileBox"); 
var x = InputsWrapper.length; 
var FieldCount = 1; 
$(AddButton).click(function(e)//on add input button click 
{ 

    FieldCount++; 
    $(InputsWrapper).append('<h4 class="parteciptitle">Partecipante ' + FieldCount + '</h4><div class="field inline-block name"><label for="input_type' + FieldCount + '" class="field-label common_font regular medium_font_size form_color">Ente, Comune, Azienda</label><input id="input_type' + FieldCount + '" name="TEXT" class="field-input" type="text" required></div><div class="field inline-block name"><label for="input_name' + FieldCount + '" class="field-label common_font regular medium_font_size form_color">Nome Cognome</label><input id="input_name' + FieldCount + '" name="TEXT" class="field-input" type="text" required></div><div class="field inline-block name"><label for="input_tel_sem' + FieldCount + '" class="field-label common_font regular medium_font_size form_color">Numero di telefono</label><input id="input_tel_sem' + FieldCount + '" name="TEXT" class="field-input" type="text" required></div><div id="emailsem' + FieldCount + '" class="field inline-block email"><label for="input_email_sem' + FieldCount + '" class="field-label common_font regular medium_font_size form_color">Indirizzo Email (consiglio: email personale che controlli)</label><input id="input_email_sem' + FieldCount + '" name="EMAIL" class="field-input" type="EMAIL" required></div>'); 
    x++; 
    return false; 

}); 



$(RemoveButton).click(function(e)//on remove input button click 
{ 
    $(InputsWrapper).empty(''); 
    FieldCount = 1; 
}); 



/* mostra/nasconde bottone reset partecipanti */ 
$("#AddMoreFileBox").click(function(){ 
    $("#RemoveMoreFileBox").show(); 
}); 

/* torna su quando clicco sul bottone reset partecipanti */ 
$("#RemoveMoreFileBox").click(function() { 
    $('html, body').animate({ 
     scrollTop: $(".choosecontact").offset().top 
    }, 300); 
    $("#RemoveMoreFileBox").hide(); 
}); 



/*------------------------- 
    add form function 
-------------------------*/ 

$('.field-input').focus(function(){ 
    $(this).parent().addClass('is-focused has-label'); 
}); 

$('.field-input').each(function(){ 
    if($(this).val() != ''){ 
     $(this).parent().addClass('has-label'); 
    } 
}); 

$('.field-input').blur(function(){ 
    var $parent = $(this).parent(); 
    if($(this).val() == ''){ 
     $parent.removeClass('has-label'); 
    } 
    $parent.removeClass('is-focused'); 
}); 

Answer 1

.focusおよび.blurリスナーを適用した後に新しい要素が追加されるため、リスナーがアタッチされません。 あなたが

$('.form').on('focus','.field-input',function(){ 
    $(this).parent().addClass('is-focused has-label'); 
}); 

と

$('.form').on('blur','.field-input',function(){ 
    var $parent = $(this).parent(); 
    if($(this).val() == ''){ 
     $parent.removeClass('has-label'); 
    } 
    $parent.removeClass('is-focused'); 
}); 

のように、これは単に2つのリスナーを使用する（新しい要素を管理以外の）利益を有する、フォームまたは新しい要素を処理するための共通のコンテナにイベントを委任することができます代わりに子要素

他の事ごとに2人のリスナーのフォーム要素に、あなたはあなただけ使用することができ、再びjqueryの中にjQueryオブジェクトをラップする必要はありません

AddButton.click(etc..) and RemoveButton.click(etc..) 

Answer 2

問題はスクリプトの一番下にある3つのリスナー関数は、唯一の最初の入力フィールドを扱うということです後に動的に追加されるものではありません。

DOMに新しい要素を作成して追加した後で、新しい要素のバインディングも追加する必要があります。