jQuery append passiert nur einmal

Question

Meine Absicht ist für eine neue <input> Felder erstellt werden jedes Mal, wenn nur eine leere eins übrig ist - so wenn die oberste Fokus verliert. Dies geschieht, aber nur einmal (so nur drei <input> Felder jemals gemacht werden können

Mein Arbeitsbeispiel bei http://sas98.user.srcf.net/guestlist/ unter Nummer 4.

Der Code ist:.

<div id="names"> 
<p><input class="input" type="text" name="name1" /></p> 
<p><input class="input" type="text" name="name2" /></p> 
</div> 

<script type="text/javascript"> 
$(document).ready(function() { 
var name = $("<p><input class='input' type='text' /></p>"); 
    $('.input').blur(function() { 
     if($(this).val().length>0) { 
      $('#names').append(name.clone()); 
     } 
    }); 
}); 
</script> 

EDIT:

  $('#names').append(name); 

zu

Changed

 $('#names').append(name.clone()); 

Lässt es ein paar Mal arbeiten, bevor Sie stecken bleiben. Es scheint temperamentvoll - ich kann kein Muster dafür sehen.

Answer 1

Das Problem ist der Event-Handler nicht aktualisiert wird. für JQuery < 1.7 Verwendung $ .live() verschwimmen zu binden, auf neuere Versionen verwenden .on $()

Answer 2

Dies liegt daran, dass Sie den .blur() --Handler nur einmal hinzufügen (bevor die neuen Eingaben erstellt werden), sodass der neuesten Eingabe auch ein Handler für das Blur-Ereignis zugewiesen werden muss.

Interesse Sake, versuchen:

<div id="names"> 
<p><input class="input" type="text" name="name1" /></p> 
<p><input class="input" type="text" name="name2" /></p> 
</div> 

<script type="text/javascript"> 
$(document).ready(function() {  
    $('.input').blur(addBlur()); 
}); 
function addBlur() { 
     var name = $("<p><input class='input' type='text' /></p>"); 
     if($(this).val().length>0) { 
      var newBox = name.clone(); 
      newBox.blur(addBlur()); 
      $('#names').append(name.clone()); 
     } 
    } 
</script> 

Answer 3

Dies funktioniert wie du, ich denke wollen: http://jsfiddle.net/YFJA6/

$('#names').on({ 
blur: function() { 
    if($(this).val().length>0) { 
     $('#names').append('<p><input class="input" type="text" /></p>'); 
    } 
} 
}, 'input'); 

Answer 4

dies für mich gearbeitet:

$('#selector').append(htmlcontent.clone(true));