1

我的意图是<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());

让它在卡住之前再工作几次。这似乎是喜怒无常的——我看不出它有什么规律。

4

4 回答 4

2

问题是事件处理程序没有更新。对于 Jquery < 1.7 使用 $.live() 绑定模糊，在较新版本上使用 $.on()

于 2012-04-06T22:00:01.613 回答
1

这就像你想要的那样工作：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-06T22:08:25.617 回答
0

这是因为您只添加了一次 .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-06T21:52:49.487 回答
0

这对我有用：

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

于 2016-02-08T21:40:36.763 回答