Question

我有一个表单部分，用于处理名为options的文本输入。

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

<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添加的最后一个。怎么做？

Answer 1

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

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

假设#options是一个静态容器元素，因为你要追加它，

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

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

Answer 2

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

因此，使用事件委派代码{ - 1}} - Reference

如果.on()元素是静态的，您可以使用$(document)上的$('#options')进行委派。

#options

Answer 3

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

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

Answer 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());

您当前的代码在哪里。

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

单击最后一个现有输入时，添加输入文本字段（使用jquery）

5 个答案: