添加输入文本字段(使用jquery)，当最后一个现有的输入被点击

Add input text field(using jquery) when last existing input is clicked

本文关键字：输入 最后一个 字段 文本 使用 jquery 添加      更新时间：2023-09-26

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

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

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

i tried 

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

第一次确实有效。但之后就不工作了。它不考虑由jquery添加的输入。所以它只工作，当我点击第二个选项。不是最后一个由jquery添加的。怎么做呢?

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

由于新的文本框是在之后动态添加的，因此它们没有单击处理程序。你要么必须手动绑定点击处理程序(，这是非常低效的)，要么通过将事件处理程序绑定到静态父元素来使用事件委托。

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

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

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

动态添加元素。它不会获取第一个追加元素之后的最后一个元素。

所以使用事件委托为您的代码使用.on() - Reference

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

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

你只需要绑定点击，即使使用.on动态添加的元素，像下面:

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

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

可能的方法是

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

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

你也可以考虑用一些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/

相关文章：