Question

我是jquery的新手，我一直在寻找我的问题的答案，但没有成功，所以这里是：

我有一个带有文本字段列表的表单，每当用户离开（模糊）最后一项时，列表末尾会出现一个新的文本字段。

我的问题是： a）当用户离开最初创建的任何文本字段时，创建新的文本字段，而不仅仅是最后一个。 b）新创建的项目是新的“最后一项”，但不按照它应该做的行为

这是我的代码：

<form>
<div id="list">
<ul>
<li><input type="text" name="firstname[]"></li>
<li><input type="text" name="firstname[]"></li>
<li><input type="text" name="firstname[]"></li>
</ul>
</div>
<input type="submit">
</form>

和jquery文件：

   $(function(){
   $('#list :last-child').on('blur', function(){
   html = "<li><input type='text' name='firstname[]'></li>";
   $('#list').append(html);
   });
   });

感谢您的帮助！

UPDATE 谢谢你们的答案，花了2分钟......非常令人印象深刻！所以这是更新：

$(function(){
  $(document).on('blur','#list :last-child',function(){
       html = "<li><input type='text' name='firstname[]'></li>";
       $('#list').append(html);
       return false;
   });
});

我添加了return false以避免任何奇怪的行为（同时多次追加），但我仍有问题：当我模糊它们时，列表中的所有项目都会创建一个新项目，而不仅仅是最后一项！

Answer 1

使用.on()

因为您的元素是动态添加的，所以在DOM就绪或页面加载时它不存在。

所以你必须使用Event Delegation

语法

$( elements ).on( events, selector, data, handler );

像这样

$(document).on('blur','#list :last-child',function(){
    // code here
});

或

$('parentElementPresesntAtDOMready').on('blur','#list :last-child',function(){
   // code here
});

<小时/> 更好地使用

$('#list').on('blur',':last-child',function(){
    // code here
});

OP更新后更新问题

Working Fiddle Demo

$(function () {
    $(document).on('blur', '#list li:last-child', function () { //find last child of li:lastchild
        var html = "<li><input type='text' name='firstname[]'></li>";
        $('#list ul').append(html); //append list item to ul
        return false;
    });
});

更好地将事件处理程序附加到父元素

Working Fiddle Demo

$(function () {
    $('#list').on('blur', 'li:last-child', function () {
        var html = "<li><input type='text' name='firstname[]'></li>";
        $('#list ul').append(html);
        return false;
    });
});

Answer 2

使用$（document）.on（...），它将绑定添加到页面的所有动态控件的事件。

$(function(){
  $(document).on('blur','#list :last-child',function(){
       html = "<li><input type='text' name='firstname[]'></li>";
       $('#list').append(html);
   });
});

Answer 3

试试这个：

$(function(){
    $(document).on('blur', '#list :last-child',function(){
       html = "<li><input type='text' name='firstname[]'></li>";
       $('#list').append(html);
    });
});

Answer 4

可能你正在寻找这个，如果不是，请再解释一下

$(function(){
    $('#list').on('blur','input:last-child' ,function(){
   html = "<li><input type='text' name='firstname[]'></li>";
   $('#list ul').append(html);
  });
});

Answer 5

你需要的只是＆＃34; .on＆＃34; jquery的功能被称为＆＃34; .live＆＃34;在jquery 1.9之前，请通过以下代码了解更多详细信息，请点击此链接

https://api.jquery.com/on/

$(function(){
    $(document).on('blur','#list :last-child',function(){
     html = "<li><input type='text' name='firstname[]'></li>";
     $('#list ul').append(html);
   });
});

如何使用动态创建的元素？

5 个答案: