jQuery:当最后一个文本框被填充时创建新的文本框

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

本文关键字：文本 创建 填充 最后一个 jQuery      更新时间：2023-09-26

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

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

可以工作，但它只绑定到最初生成的第二个文本框。我想要发生的是如果在用户添加了额外的工具之后，每次他们点击最后一个新生成的输入，它会生成另一个，以此类推。我的猜测是DOM仍然认为第二个文本框是"最后一个"，尽管在最初创建DOM之后添加了另一个文本框。是否有一种方法来重新渲染DOM或改变我的jQuery，使它始终选择最后的输入框?

动态添加的内容不能用于.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

try this

$( "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/

这是我的解决方案，它寻找按键以及点击(假设人们可能是选项卡)。$ (' .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/

相关文章：