Javascript 动态添加新元素后，jQuery选择器不会更新

我的选择是：

$('section#attendance input:last')

但是，我将另一个输入附加到SectionAttention。我希望选择器现在选择它应该选择的元素，因为：last。然而，出于某种原因，它没有，我也不太清楚为什么

以下是我的完整代码：

$('section#attendance input:last').keydown(function(e) {
        if (e.which == 9)
        {
            var $this = $(this);
            var num = parseInt($this.attr('name').match(/\d+(,\d+)?/)[0]) + 1;
            $this.parent().append('<input type="text" name="attendance[' + num +']" value="Name and Position" class="medium" />');
        }
    });

新代码：

    $("section#attendance").on("keydown", "input:last", function(e) {
    if (e.which == 9) {
        var $this = $(this);
        var num = parseInt($this.attr('name').match(/\d+(,\d+)?/)[0]) + 1;
        $this.after('<input type="text" name="attendance[' + num +']" value="Name and Position" class="medium" />');
    }
});

---

编辑：问题似乎出现在“input:last”上，因为如果我只使用input，它就会起作用。另外，如果我将类“last”添加到最后一个元素中，当我使用“input.last”作为选择器时，它会起作用。

要对动态插入的内容做出反应，必须使用委派事件。当前建议使用的live函数已被弃用，bind和delegate已被取代。

问题很可能是因为您正在使用keydown事件。它实际上对选择器使用bind。仅绑定第一次附加时存在的效果项。JQuery文档说：

将attacheds事件绑定到调用时存在或与选择器匹配的元素。之后创建的任何元素或由于类已更改而匹配的元素都不会触发绑定事件

您应该将keydown替换为以下内容：

$('section#attendance).on("keydown", "input:last", function(e) {...});

---

根据您使用的jQuery版本，您应该在jQuery 1.7之前使用.delegate，或者在jQuery 1.7+上使用.on来进行委托事件处理，该事件处理将处理动态添加的元素的事件。注意：所有版本的jQuery都不推荐使用live，因此不应再使用它

使用.on，您可以使用以下命令：

$("#attendance").on("keydown", "input:last", function(e) {
    if (e.which == 9) {
        var $this = $(this);
        var num = parseInt($this.attr('name').match(/\d+(,\d+)?/)[0]) + 1;
        $this.parent().append('<input type="text" name="attendance[' + num +']" value="Name and Position" class="medium" />');
    }
});

使用.delegate类似，只是参数的顺序不同。您可以在jQuery文档和中看到它们

委托事件处理使用一些javascript事件的冒泡功能。这允许您将事件处理程序附加到一个不来不去的父对象，让它查看从子对象冒泡到它的每个事件，检查事件是否来自具有适当选择器的对象，如果是，则执行事件处理代码。这样，当对象来来去去去时，它们的事件仍然得到适当的处理

由于您最初是这样做的，所以您可以在事件绑定代码运行时将事件处理程序直接绑定到与选择器“SectionAttention input:last”匹配的对象。从那时起，它直接绑定到该特定对象，而不管该对象是否仍与选择器匹配，或者是否将新对象添加到与选择器匹配的DOM中。使用.delegate或.on的委托事件处理允许事件处理行为更具动态性-自动调整以适应DOM中的更改。您只需将事件绑定到一个不会更改的公共父对象，它就可以自动监视其所有子对象。

不要使用live！使用 由于性能不佳，live方法已被弃用，请立即使用该方法

$('section#attendance').on('keydown', 'input:last', function(e) {
    /* ... code ... */
});

---

此外，没有理由在您的id选择器前面有section标记。

bind和delegate没有被弃用。您是对的。live已被弃用，bind和delegate已被取代。嘿，我尝试过这个方法，但由于某些原因，它似乎不起作用。我已经用新代码更新了我的帖子，并且我已经查看了.on的文档，但是我无法找出哪里出了问题。为帮助干杯！问题是您添加的输入标记没有代码所期望的正确类型的name属性。你没有透露你的HTML，但在我看来，你的代码无法工作，因为它解析name属性中的数字。您的正则表达式匹配两个中间带有逗号的数字，但是您添加的新输入标记没有这种格式。您可以在此处看到更简单的工作版本：。我们必须查看您的HTML，以便提供更具体的建议。