javascript - 未添加 Jquery 类

Question

我有一个脚本，当我专注于字段等时，它可以将类添加到我的表单字段(例如 Material 设计)......在我的表单中，我使用另一个脚本，让用户单击按钮来添加更多字段。问题是，当我单击按钮时添加的其他字段似乎不受添加类的第一个脚本的影响，因此当我专注于这些字段时，不会应用类。

这是我的 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 监听器后添加的，因此它们不会附加这些监听器。 您可以将事件委托(delegate)给表单或公共(public)容器来处理新元素，例如

$('.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');
});

这样做的好处是(除了管理新元素之外)在表单元素上仅使用两个监听器，而不是每个子元素使用两个监听器

另一件事，你不必再次将jquery对象包装在jquery中，你可以直接使用

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