jQuery追加只发生一次

我的意图是每创建一个新的<input>字段时只剩下一个空白字段 - 所以当最上面的字段失去焦点时。出现这种情况，但只有一次（所以只有三个<input>领域都不能进行jQuery追加只发生一次

我的工作的例子是在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>

编辑：

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

改为

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

在卡住之前使其多次工作。这看起来很有气质 - 我看不出一个模式。

来源

2012-04-06 Sebastian

的问题是事件处理程序不会被更新。 jQuery的< 1.7使用$ .live（）绑定模糊，在新版本使用$。对（）

来源

2012-04-06 22:00:01 worenga

我在哪里可以在这里添加$ .on（）？ – Sebastian 2012-04-06 22:06:58

http://jsfiddle.net/YFJA6/1/ – worenga 2012-04-06 22:23:12

这是因为您只添加一次.blur（）处理程序一次（在创建新输入之前），因此最新的输入也需要为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>

来源

2012-04-06 21:52:49 hofnarwillie

感谢您的回复。第二个处理程序在哪里？ – Sebastian 2012-04-06 21:59:57

查看更新的答案 – hofnarwillie 2012-04-06 22:00:39

当我尝试它时，脚本无法正常工作恐怕 – Sebastian 2012-04-06 22:02:58

这就像你想，我想：http://jsfiddle.net/YFJA6/

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

来源

2012-04-06 22:08:25 mikevoermans

是的，这是另一个逻辑问题 - 可以遍历所有输入 - 检查val（）并确保没有空白 - 以避免添加过多空白输入。我刚刚离开了他们开始的逻辑。 – mikevoermans 2012-04-06 22:19:03

这将是完美的，这是如何做到的？ – Sebastian 2012-04-06 22:21:35

它不完美，因为您可以将输入添加到前两个字段并在它们之间切换，并且不断添加新字段。请参阅http://jsfiddle.net/YFJA6/1/进行修复 – worenga 2012-04-06 22:24:16

这个工作对我来说：

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

来源

2016-02-08 21:40:36 mostafaznv

jQuery追加只发生一次

回答

相关问题