Jquery-Klasse nicht hinzugefügt

Question

Ich habe ein Skript, das Klassen zu meinen Formularfeldern hinzufügen (etwas wie Material Design), wenn ich auf das Feld usw. konzentrieren. In meinem Formular verwende ich ein anderes Skript, das Benutzer auf eine Schaltfläche klicken füge weitere Felder hinzu. Das Problem ist, dass diese anderen Felder, die beim Klicken auf die Schaltfläche hinzugefügt wurden, vom ersten Skript, das Klassen hinzufügt, nicht betroffen waren. Wenn ich mich auf diese Felder konzentriere, werden die Klassen nicht angewendet.

Das ist mein HTML-Code:

<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> 

Und diejenigen, meine Skripte sind:

/*--------------------------- 
    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

Da die neuen Elemente nach dem Anwenden der Listener für .focus und .blur hinzugefügt werden, sind diese Listener nicht angehängt. können Sie das Ereignis in dem Formular oder einen gemeinsamen Behälter übertragen, um neue Elemente handhaben, wie

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

und

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

dies hat den Vorteil, (andere als neue Elemente Verwaltung) nur zwei Zuhörer zu verwenden anstelle von zwei Zuhörer auf das Formularelement pro Kind Element

eine andere Sache, Sie müssen nicht wieder jquery Objekt in jquery wickeln, können Sie einfach

verwenden

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

Answer 2

Das Problem ist, dass die drei Listener-Funktionen am unteren Rand des Skripts nur die Anfangseingabefelder behandeln , nicht diejenigen, die danach dynamisch hinzugefügt wurden.

Sie müssen also die Bindungen für die neuen Elemente hinzufügen, nachdem Sie sie erstellt und an das DOM angehängt haben.