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

问题描述

我的选择器是:

$('section#attendance input:last')

但是，我将另一个输入附加到 section#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()，你可以这样使用:

Using .on(), you can use this:

$("#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 文档 .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.

正如您最初所做的那样，您将在事件绑定代码运行时将事件处理程序直接绑定到与选择器 'section#attendance input:last' 匹配的对象.从那时起，无论该对象是否仍然与选择器匹配，或者是否将新对象添加到与选择器匹配的 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屋！