jQuery append происходит только один раз

Question

Мое намерение состоит в создании новых полей <input>, которые будут создаваться каждый раз, когда остается только один пустой - так, когда верхняя часть теряет фокус. Это происходит, но только один раз (так что только три <input> поля могут либо быть

Мой рабочий пример на http://sas98.user.srcf.net/guestlist/ под номером 4.

Код:.

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

Изменен

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

Заставляет его работать еще пару раз, прежде чем застрять. Кажется, темпераментный - я не вижу в этом картины.

Answer 1

Проблема заключается в обработчик события не обновляется. для Jquery < 1,7 использования $ .live(), чтобы связать размытость, на более новых версиях используйте $ .он()

Answer 2

Это связано с тем, что вы добавляете обработчик .blur() только один раз (до создания новых входов), поэтому для самого нового входа должен быть назначен обработчик события размытия.

Ради интереса, попробуйте:

<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

Это работает, как вы хотите, я думаю: 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

это работает для меня:

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