javascript - 当我添加应成为新 ':last' 的新元素时，jQuery 单击事件不会更新 ":last"

Question

所以我有一个小问题， 我正在研究一个以这种方式工作的 jquery 的小效果。 向用户提供一个输入按钮。 一旦他在输入字段中输入内容，就会在其下方添加一个新输入。

这是 HTML

<div class="container">
    <div class="row">
        <div class="col-md-4 data">
            <input type="text" class="form-control" placehoder="some text"/>
        </div>                              
    </div>
    <a href="#" class="done"><span><i class="fa fa-plus"></i></span></a>
</div>

这是jquery代码

$(document).ready(function()
{

    var input_button = '<div class="col-md-4 data"><input type="text" class="form-control" placeholder="some text"/></div>';
    var last = 'div.data input[type="text"]';
    $('div.data input[type="text"]:last').on("keyup",function(e)
    {
        value = $(this).val().trim();

        if(value.length != 0)
        {
            $('.row').append(input_button);
        }
    });
});

因此，我使用 $(div.data input[type="text"]:last) 选择器和 keyup 事件。 然而，在我自己的想法中，当我添加一个新的输入按钮时，它应该自动成为 ":last" 输入字段。对吗？

但事实并非如此。根据代码的工作方式，最后一个输入字段是最初存在的第一个输入字段？

基本上，即使通过 keyup 事件添加了更多按钮，第一个原始输入按钮也被视为“最后一个”按钮。

所以我的问题是，如何使新添加的输入字段(使用 jquery 添加)成为下一个 keyup 事件的最后一个输入字段？

Answer 1

问题在于您绑定(bind)到仅搜索一次的元素，而不是动态选择器。

你应该使用

$('div.data').on("keyup", 'input[type="text"]:last', function(e)

这样每次 元素的后代中出现 keyup 事件时都会检查 'input[type="text"]:last' 选择器>$('div.data').

由于您的问题不清楚，如果您还动态添加 div.data 元素，那么您应该这样做

$('.container').on("keyup", 'div.data input[type="text"]:last', function(e)

要了解有关 jQuery 事件委托(delegate)的更多信息，您可以查看 this page .