jQuery：填充最后一个文本框时创建新文本框答案

【问题标题】：jQuery : Create new text box when the last textbox is filledjQuery：填充最后一个文本框时创建新文本框
【发布时间】：2014-10-01 07:38:46
【问题描述】：

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

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

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

【问题讨论】：

你能在 JSfiddle 上放一个半工作的例子吗？

标签： javascript jquery html forms dynamic

【解决方案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

【讨论】：

非常感谢，正是我想要的。那么为什么不能只使用 jQuery 的 click() 函数呢？我想了解问题的原因:)
@dge888 - 据我所知，.click() 在页面首次加载时会自行绑定。 .on("click") 与子选择器一起工作，因为子不一定需要与页面一起加载。 :-)

【解决方案2】：

试试这个

$( "input" ).on('click' , addNewInput);

function addNewInput (){
  if($(this).is(':last')){
    $( this ).after( '<input type="text" placeholder="Tool Name" />' );
    $( "input" ).on('click' , addNew);
  }
}

http://jsfiddle.net/yann86/3xh09wab/

【讨论】：

【解决方案3】：

这是我的解决方案，它查找按键和点击（假设人们可能正在点击）。 $('.sidebar').on 是必需的，因为 :last 输入是动态的，这是您可以针对动态内容定位的方式。

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

JSFiddle：http://jsfiddle.net/nlaffey/fsuo5rmg/

【讨论】：