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>

编辑：

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

已更改为

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

在卡住之前使其工作几次。这看起来很有气质 - 我无法看到它的模式。

Answer 1

问题是事件处理程序未更新。对于Jquery＆lt; 1.7使用$ .live（）绑定模糊，在较新的版本上使用$ .on（）

Answer 2

这就像你想要的那样：http://jsfiddle.net/YFJA6/

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

Answer 3

这对我有用：

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

Answer 4

这是因为你只添加了一次.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>

jQuery追加只发生一次

4 个答案: