Ereignis-Listener hinzufügen die gleiche Funktion auszulösen

Question

ich dieses jQuery-Code müssen dynamisch Schaltfläche erstellt,

var next = 1; 
$(".add-more").click(function(e){ 
    e.preventDefault(); 
    $(this).replaceWith("<button id='remove" + (next) + "' class='btn btn-danger remove-me pull-right'>-</button>"); 
    var addto = "#field" + next; 
    next = next + 1; 
    var str = "<tr id='field" + next + "'><td><input autocomplete='off' class='input form-control' id='item" + next + "' name='item" + next + "' type='text' data-items='8'/></td>"+ 
       "<td><input autocomplete='off' class='input form-control' id='desc" + next + "' name='desc" + next + "' type='text' data-items='8'/></td>"+ 
       "<td><input autocomplete='off' class='input form-control' id='qty" + next + "' name='qty" + next + "' type='text' data-items='8'/></td>"+ 
       "<td><input autocomplete='off' class='input form-control' id='ucost" + next + "' name='ucost" + next + "' type='text' data-items='8'/></td>"+ 
       "<td><input autocomplete='off' class='input form-control' id='tcost" + next + "' name='tcost" + next + "' type='text' data-items='8'/></td>"+ 
       "<td><input autocomplete='off' class='input form-control' id='type" + next + "' name='type" + next + "' type='text' data-items='8'/></td>"+ 
       "<td><button id='b1' class='btn add-more pull-right' type='button'>+</button></td></tr>"; 
    $(addto).after(str); 
    $("#count").val(next); 
    $('.remove-me').click(function(e){ 
      e.preventDefault(); 
      var fieldNum = this.id.charAt(this.id.length-1); 
      var fieldID = "#field" + fieldNum; 
      $(this).remove(); 
      $(fieldID).remove(); 
    }); 
}); 

Diese Zeilen Code ein Benutzer in der Lage machen mehrere Felder zu erstellen. Wenn der Benutzer auf die Schaltfläche "Hinzufügen" klickt, werden mehrere Felder erstellt. Dies wird auch die Schaltfläche "Hinzufügen" zu "Entfernen" ändern. Und fügen Sie einen weiteren "Hinzufügen" Knopf hinzu.

Mein Problem hier ist, dass die dynamisch erstellte # b1-Schaltfläche keinen Ereignis-Listener haben.

ich diese Zeile Code zu verwenden versucht,

$("#field" + next).attr('data-source',$(addto).attr('data-source')); 

aber es funktioniert nicht. Meine Idee ist, wie diese,

http://bootsnipp.com/snippets/featured/dynamic-form-fields-add-amp-remove

Wer kann mir helfen?

Answer 1

für dynamisch erstellte Elemente verwenden

$(document).on('click', '.add-more', function() {...}; 

statt

$('.add-more').click(... 

dies genannt wird Ereignis Delegation, Sie Ereignis hinzufügen zu dokumentieren (oder ein übergeordnetes Element, das von Seite zu laden vorhanden ist) und dann triggern, wenn sein Kind, das Sie als Argument angeben (in diesem Fall '.add-more'), auf

geklickt wird