不要使用直播！使用on

Question

我的选择器是：

$('section#attendance input:last')

但是，我在＃attendance部分添加了另一个输入。我希望选择器现在选择该元素（因为它应该是: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" />');
    }
});

编辑：问题似乎是在'输入：最后'，因为如果我只是使用输入它是有效的。另外，如果我将类'last'添加到最后一个元素，当我使用'input.last'作为选择器时，它就可以工作。

Answer 1

根据您使用的jQuery版本，您应该使用.delegate()（在jQuery 1.7之前）或.on()（jQuery 1.7+）来委派事件处理来处理元素的事件。动态添加。注意，{j}的所有版本都不推荐使用.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 doc .delegate()和.on()中看到它们。

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

正如您最初所做的那样，您可以在事件绑定代码运行时将事件处理程序直接绑定到与选择器'section#attendance input:last'匹配的对象。从那时起，它直接绑定到该特定对象，无论该对象是否仍然匹配选择器，或者是否将新对象添加到与选择器匹配的DOM中。使用.delegate()或.on()进行委派事件处理可以使事件处理行为更加动态 - 自动调整DOM中的更改。您只需将事件绑定到一个不会改变的公共父对象，它就可以自动监视它的所有子对象。

Answer 2

要对动态插入的内容作出反应，您必须使用委派的事件。目前推荐的功能是.on()（live已弃用，bind和delegate已被取代。

Answer 3

不要使用直播！使用on

由于性能不佳，不推荐使用实时方法，现在请改用on方法。

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

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

Answer 4

问题很可能是因为您正在使用keydown事件。这实际上使用绑定选择器。仅绑定首次连接时存在的效果项。 JQuery文档说：

bind（）将事件附加到在调用时存在或匹配选择器的元素。之后创建的任何元素或因为类被更改而前进的元素都不会触发绑定事件。

您应该使用以下内容替换keydown：

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

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

4 个答案:

不要使用直播！使用on