La funzione di clic del pulsante Jquery() non funziona

Question

Sto provando a creare un modulo dinamico in cui l'utente può aggiungere campi di testo dinamici in base alle proprie esigenze. Ecco il mio codice jQuery ..

$(document).ready(function() { 
    $("#add").click(function() { 
     var intId = $("#buildyourform div").length +1; 
     var fieldWrapper = $("<div class=\"fieldwrapper\" name=\"field" + intId + "\" id=\"field" + intId + "\"/>"); 
     var fName = $("<input type=\"text\" name=\"name\" class=\"fieldname\" id=\"tb"+ intId +"_1\"/>"); 
     var lname = $("<input type=\"text\" name=\"email\" class=\"lastname\" id=\"tb"+ intId +"_2\"/>"); 
     var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />"); 

     var addButton = $("<input type=\"button\" class=\"add\" id=\"add\" value=\"+\" />") 
     removeButton.click(function() { 
      $(this).parent().remove(); 
     }); 
     fieldWrapper.append(fName); 
     fieldWrapper.append(lname); 
     fieldWrapper.append(removeButton); 
     fieldWrapper.append(addButton); 
     $(this).remove(); 
     $("#buildyourform").append(fieldWrapper); 

    }); 

}); 

e Il codice HTML è ...

<fieldset id="buildyourform"> 
    <legend>Build your own form!</legend> 
    <div class="fieldwrapper" name="field1" id="field1" /> 
     <input type="text" name="name" class="fieldname" id="tb1_1" /> 
     <input type="text" name="email" class="lastname" id="tb1_2" /> 
     <input type="button" value="+" class="add" id="add" /> 
    </div> 
</fieldset> 
<input type="submit" value="send" id="asdasd" name="submit" /> 

controllare il mio JSFiddle anche.

Ciò che non va in me è quando l'utente fa clic sul pulsante "+" per la prima volta, quindi fa clic su function working e aggiunge due campi di testo nel mio fieldset. Ma dopo di ciò, quando clicco sul pulsante "+", la sua funzione di clic non attiva. Potrebbe essere un conflitto. Per favore aiuto.

Answer 1

Qui è necessario utilizzare la sintassi della delega di evento di .on(). Cambio:

$("#add").click(function() { 

a

$("#buildyourform").on('click', '#add', function() { 

jsFiddle example

Answer 2

Dopo aver effettuato l'unica id attraverso il document, Devi usare event delegation

$("#container").on("click", "buttonid", function() { 
    alert("Hi"); 
}); 

Answer 3

È necessario utilizzare un gestore eventi delegato, poiché gli elementi #add aggiunti dinamicamente non avranno l'evento click associato a essi. Prova questo:

$("#buildyourform").on('click', "#add", function() { 
    // your code... 
}); 

Inoltre, è possibile effettuare le stringhe di codice HTML più facile da leggere per riga mescolando cita:

var fieldWrapper = $('<div class="fieldwrapper" name="field' + intId + '" id="field' + intId + '"/>'); 

O anche fornire gli attributi come un oggetto:

var fieldWrapper = $('<div></div>', { 
    'class': 'fieldwrapper', 
    'name': 'field' + intId, 
    'id': 'field' + intId 
}); 

Answer 4

Il l'evento click non è associato al tuo nuovo elemento, usa un jQuery.on per gestire il clic.