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

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>

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

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

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