Question

我有一个有序列表，在有序列表中我希望每个列表元素有两个文本框。然后，我想在我的有序列表的末尾追加另一个包含两个文本框的列表元素，用户键入最后一个元素的最后一个文本框。

我的JQuery代码如下所示：

$("ol li input:last-child").change(function(){
    $("ol").append('<li>Name: <input type="text"/><input type="text"/></li>');
});

我的HTML看起来像这样。

<ol>
    <li><input type="text"/><input type="text"/></li>
    <li><input type="text"/><input type="text"/></li>
</ol>

我想要的是当用户键入最后一个元素时，在列表末尾添加一个新的列表元素（包含两个文本框），这样用户可以想象在用户完成之前继续输入。 / p>

目前发生的情况是用户可以输入任何当前列表元素的最后一个输入框，我的代码将创建另一个列表元素，然后键入新创建的列表元素（现在应该是最后一个子元素）不像我希望的那样创建一个额外的列表元素。

Answer 1

使用.on()。

$(document).on('change','ol li:last input:last-child',function()
{
    $("ol").append('<li>Name: <input type="text"/><input type="text"/></li>');
});

因为DOM是动态添加的change event 将不会应用于动态加载的内容，因此.on将有助于此。

`Official Document`

Description：将一个或多个事件的事件处理函数附加到所选元素。

Answer 2

尝试

$("ol").on('change', 'li:last input:last-child', function(){
    $(this).closest('ol').append('<li>Name: <input type="text"/><input type="text"/></li>');
});

演示：Fiddle

将文本框作为用户类型动态添加到最后一个文本框中

2 个答案:

`Official Document`