动态添加新元素后，jQuery选择器不会更新 [英] jQuery selector doesn't update after dynamically adding new elements

问题描述

我的选择器是：

$('section#attendance input:last')

但是，我将另一个输入添加到＃attendance部分。我希望选择器现在选择该元素（因为它应该，因为：last 。但是，由于某种原因，它没有，我也不是确定原因？

However, I append another input to section#attendance. I want the selector to now select that element (as it should, because of the :last. However, for some reason, it doesn't, and I'm not too sure why?

这是我的完整代码：

$('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'作为选择器时，它就可以工作。

The issue seems to be on the 'input:last', as it works if I just use input. Also, if I add class 'last' to the last element, it works when I use 'input.last' as a selector.

推荐答案

根据您使用的jQuery版本，您应该使用 .delegate（）（在jQuery 1.7之前）或 .on（）（jQuery 1.7+）具有委托事件处理，它将处理动态添加的元素的事件。注意 .live（）已从所有版本的jQuery中弃用，因此不应再使用它。

Depending upon what jQuery version you are using, you should use either .delegate() (before jQuery 1.7) or .on() (jQuery 1.7+) to have delegated event handling that will handle events for elements that are added dynamically. Note .live() has been deprecated from all versions of jQuery so it should no longer be used.

使用 .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（） 。

Using .delegate() would be similar (except the arguments are in a different order). You can see both of them in the jQuery doc .delegate() and .on().

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

Delegated event handling works using the "bubbling" capability of some javascript events. This allows you to attach an event handler to a parent object (that does not come and go) and have it look at each event that "bubbles" up to it from a child, check to see if the event comes from an object with an appropriate selector, and if so, execute your event handling code. This way, as objects come and go, their events are still handled appropriately.

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

As you were originally doing things, you would bind the event handler directly to the object that matched the selector 'section#attendance input:last' at the time the event binding code ran. From then on, it was bound directly to that specific object regardless of whether that object still matches the selector or if new objects are added to the DOM that would match the selector. Delegated event handling using .delegate() or .on() allows the event handling behavior to be more dynamic - automatically adjusting to changes in the DOM. You just have to bind the event to a common parent object that will not be changing and it can automatically monitor all it's children.

这篇关于动态添加新元素后，jQuery选择器不会更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！