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

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+)来委派事件处理来处理动态添加的元素的事件.注释.live()已从所有版本的jQuery中弃用,因此不应再使用它.

使用.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

不要使用直播！使用于

由于性能不佳，live 方法已被弃用，现在改用on方法。

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

另外，没有理由将标签section放在 id 选择器前面。