Jquery class not added

Question

I have a script that add classes to my form fields (somehting like material design) when I focus on the field etc.... In my form I use another script that let user click on a button to add more fields. The problem is that those other fields added when I click on the button seems not been affected by the first script that add classes, so when I focus on those fields the classes are not applied.

This is my 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>

And those are my scripts:

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

since the new elements are added after you apply the .focus and .blur listeners,they wont have those listeners attached. you can delegate the event to the form or a common container to handle new elements,like

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

and

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

this has the benefit (other than managing new elements) to use just two listeners on the form element instead of two listener per child element

an other thing,you don't have to wrap jquery object in jquery again,you can just use

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

Answer 2

The problem is that the three listener functions at the bottom of your script only handle the initial input fields, not the ones added afterwards dynamically.

So you also have to add the bindings for the new elements after you have created and appended them to the DOM.