Funkcja kliknięcia przycisku Jquery nie działa

Question

Próbuję utworzyć dynamiczną formę, w której użytkownik może dodawać dynamiczne pola tekstowe w oparciu o ich wymagania. Oto mój kod 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); 

    }); 

}); 

i kod HTML jest ...

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

Sprawdź mój JSFiddle również.

Co jest ze mną nie tak, kiedy użytkownik kliknie przycisk "+" po raz pierwszy, a następnie kliknięcie działa i dodaje dwa pola tekstowe do mojego zestawu pól. Ale potem, kiedy klikam przycisk "+", nie jest to funkcja wyzwalania kliknięcia. Może być konfliktem id. Proszę pomóż.

Answer 1

Należy użyć tutaj składni delegacji zdarzeń .on(). Zmiana:

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

do

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

jsFiddle example

Answer 2

Po dokonaniu id unikalne w całej document, trzeba użyć event delegation

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

Answer 3

Należy użyć delegowanej procedury obsługi zdarzeń, ponieważ dynamicznie dołączane elementy #add nie będą wiązały się z zdarzeniem kliknięcia. Spróbuj tego:

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

Ponadto, można dokonać ciągi HTML łatwiejsze do odczytania przez zmieszanie linię cytuje:

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

Albo nawet dostarczanie atrybuty jako obiekt:

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

Answer 4

The Zdarzenie kliknięcia nie jest powiązane z nowym elementem, użyj przycisku jQuery.on do obsługi kliknięcia.