1

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

我有如下所示的 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>

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

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

4

2 回答 2

3

为此使用.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：将一个或多个事件的事件处理函数附加到所选元素。

于 2013-04-29T03:48:34.447 回答
2

尝试

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

演示：小提琴

于 2013-04-29T03:48:00.523 回答