javascript - jQuery : Create new text box when the last textbox is filled

Question

我正在构建一个表单，用户可以在其中输入执行任务所需的工具。我最初为用户生成了两个输入框，但我希望他们在必要时能够有更多的输入。我创建了一些 jQuery，在单击最后一个文本框时添加一个新文本框，暗示他们可能需要另一个文本框。代码如下:

$( ".sidebar input:last-of-type" ).click(function(){
    $( ".sidebar input:last-of-type" ).after( '<input type="text" placeholder="Tool Name" />' );
});

这有效，但它只绑定(bind)到最初生成的第二个文本框。我想要发生的是，如果在用户添加其他工具后，每次他们单击最后一个新生成的输入时，它都会生成另一个，依此类推。我的猜测是 DOM 仍然认为第二个文本框是“最后一个”，尽管在最初创建 DOM 后添加了另一个文本框。有没有办法重新呈现 DOM 或更改我的 jQuery，以便它始终选择最后一个输入框？

Answer 1

动态添加的内容不能与 .click() 一起使用。您需要在父元素 .sidebar 上使用 .on("click")，并将子选择器指定为第二个参数。

$( ".sidebar" ).on("click", "input:last-of-type", function(){
    $( ".sidebar input:last-of-type" ).after( '<input type="text" placeholder="Tool Name" />' );
});

JSFiddle