Saya memiliki skrip yang menambahkan kelas ke bidang formulir saya (sesuatu seperti desain material) ketika saya fokus pada bidang dll .... Dalam formulir saya, saya menggunakan skrip lain yang memungkinkan pengguna mengklik tombol untuk menambahkan lebih banyak bidang. Masalahnya adalah bahwa bidang lain yang ditambahkan ketika saya mengklik tombol tampaknya tidak terpengaruh oleh skrip pertama yang menambahkan kelas, jadi ketika saya fokus pada bidang itu, kelas tidak diterapkan.

Ini adalah kode HTML saya:

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

Dan itu adalah skrip saya:

/*---------------------------
    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');
});
0
Francesco 11 Agustus 2017, 11:29

2 jawaban

Jawaban Terbaik

Karena elemen baru ditambahkan setelah Anda menerapkan pendengar .focus dan .blur, mereka tidak akan memiliki pendengar tersebut. anda dapat mendelegasikan acara ke formulir atau wadah umum untuk menangani elemen baru, seperti

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

Dan

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

Ini memiliki manfaat (selain mengelola elemen baru) untuk menggunakan hanya dua pendengar pada elemen formulir alih-alih dua pendengar per elemen anak

Hal lain, Anda tidak perlu membungkus objek jquery di jquery lagi, Anda bisa menggunakan

AddButton.click(etc..) and RemoveButton.click(etc..)
1
Lorenzo Catalano 11 Agustus 2017, 08:41

Masalahnya adalah tiga fungsi pendengar di bagian bawah skrip Anda hanya menangani bidang input awal, bukan yang ditambahkan setelahnya secara dinamis.

Jadi, Anda juga harus menambahkan binding untuk elemen baru setelah Anda membuat dan menambahkannya ke DOM.

1
rainerhahnekamp 11 Agustus 2017, 08:38