单击最后一个现有输入时添加输入文本字段（使用jquery）[重复]答案

【问题标题】：Add input text field(using jquery) when last existing input is clicked [duplicate]单击最后一个现有输入时添加输入文本字段（使用jquery）[重复]
【发布时间】：2014-08-10 21:43:36
【问题描述】：

我有一个处理名为选项的文本输入的表单部分。

默认情况下，我提供两个选项。单击最后一个时，我想再添加一个选项字段。

<input type='text' name='options[]' class='options'>
<br/>
<br/>
<input type='text' name='options[]' class='options'>

我试过了

$(".options:last").click(function(){
    $("#options").append("<br/><br/><input type='text' name='options[]' class='options'>");
})

第一次确实有效。但在那之后不起作用。它不考虑 jquery 添加的输入。所以它只有在我点击第二个选项时才有效。不是 jquery 添加的最后一个。该怎么做？

【问题讨论】：

标签： javascript jquery forms text input

【解决方案1】：

您正在动态添加元素。它不会在第一次追加后获取最后一个元素。

因此，使用 .on() - Reference

为您的代码使用 事件委托

如果#options 元素是静态的，您可以在$('#options') 上使用$(document) 委托它。

$(document).on('click','.options:last',function(){
    $("#options").append("<br/><br/><input type='text' name='options[]' class='options'>");
})

【讨论】：

【解决方案2】：

click() 方法仅将事件处理程序绑定到当前存在于DOM 中的匹配元素。

由于新文本框是之后动态添加的，因此它们没有点击处理程序。您要么必须手动绑定点击处理程序（效率非常低），要么通过将事件处理程序绑定到静态父元素来使用event delegation。

假设 #options 是一个静态容器元素，因为您要附加到它，

您可以使用.on() 方法将事件处理程序委托给它，如下所示

$('#options').on('click','.options:last',function(){
 $(this).after("<br/><br/><input type='text' name='options[]' class='options'>");
})

【讨论】：

好吧，我想其他答案更好。

【解决方案3】：

即使使用.on 动态添加的元素，您也只需绑定点击，如下所示：

$(document).on("click",".options:last",function(){
    $("#options").append("<br/><br/><input type='text' name='options[]' class='options'>");
})

【讨论】：

【解决方案4】：

添加元素后需要再次将函数绑定到事件。

这样做的可能方法是

function AppendToEnd()
{
    $("#options").append("<br/><br/><input type='text' name='options[]' class='options'>");
    $(".options:last").click(AppendToEnd()); // this will bind the function to the last element as before.
}

另外，您最初需要自己绑定事件，所以添加

$(".options:last").click(AppendToEnd());

您当前的代码在哪里。

【讨论】：

【解决方案5】：

您可能希望取消绑定其他先前添加的输入的点击事件，因为用户可能希望在它们被编辑后对其进行编辑，这会导致添加不需要的选项。

此外，您可能需要考虑将选项包装在带有一些 ID 的 div 中，因为使用 id 选择器比使用类选择器要快得多。没有，我在加载时存储了选定的对象，以后不需要调用它，我可以重复使用我已经选择的对象并节省不必要的计算时间。

HTML

<div id="option-wrapper">
<input type='text' name='options[]' class='options' />
<br/>
<br/>
<input type='text' name='options[]' class='options' />
</div>

JS

var wrapper = $("#option-wrapper"),
bindClickEvents = function () {
    var options = $(".options",wrapper);
    options.unbind("click");
    options.last().on("click", function() {
        $(this).after("<br/><br/><input type='text' name='options[]' class='options'>");
        bindClickEvents();
    });
};
bindClickEvents();

JS 小提琴：http://jsfiddle.net/JKurcik/HRg9M/

【讨论】：