Question

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

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

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

Answer 1

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

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

<强> JSFiddle

Answer 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/

Answer 3

这是我的解决方案，它寻找按键和点击（假设人们可能是标签）。 $（'。sidebar'）。on是必需的：最后一个输入是动态的，这就是你如何定位动态内容。

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

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

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

3 个答案: