javascript - jQuery on() 不适用于已添加的 DOM 项

Question

我有这个:

$(document).on("click", ".prev", function(){
    $(this).closest("div").find(".slider").animate({
        "left": "+=450px"
    }, 800, "easeInOutBack");
    return false;
});

这在新元素添加到 DOM 时有效，但不适用于 DOM 中已有的元素。

当我这样做时:

$(".prev").on("click", function(){
    $(this).closest("div").find(".slider").animate({
        "left": "+=450px"
    }, 800, "easeInOutBack");
    return false;
});

它适用于 DOM 中的元素，但不适用于添加到 DOM 中的新元素。有没有一种方法可以让我在不需要编写 2 次或调用另一个函数的情况下为两者工作？

这是一个屏幕截图:

所以，下面是对其工作原理的更深入的描述。

<div id="simple-pevs" style="padding-right: 20px;">
    <?php require_once __DIR__ . "/data/get/PEVSection.php"; ?>
</div>

然后当有人想要添加另一个部分时，他们单击添加按钮，然后运行此代码:

    $(".add-another-pev").click(function(){
        $.get("./data/get/PEVSection.php?pev="+pevGroup, function(data){
            $("#simple-pevs").append(data);
        });
        pevGroup++;
        return false;
    });

如您所见，它正在调用预加载到 php.ini 文件中的同一个文件。新的(以及添加的任何其他附加的)与点击事件一起工作，而第一个没有

@ArunPJohny

console.log($(".prev")); 添加新元素后:

[a.prev, a.prev, prevObject: b.fn.b.init[1], context: document, selector: ".prev", jquery: "1.9.1", constructor: function…]
0: a.prev
1: a.prev
context: #document
length: 2
prevObject: b.fn.b.init[1]
selector: ".prev"
__proto__: Object[0]

Answer 1

下面是我从jquery官网复制过来的内容，解释的很清楚: 事件处理程序只绑定(bind)到当前选中的元素；它们必须在您的代码调用 .on() 时存在于页面上。 为确保元素存在并且可以被选择，请在文档就绪处理程序中为 HTML 中的元素执行事件绑定(bind)页面上的标记。 如果将新的 HTML 注入(inject)页面，请在将新的 HTML 放入页面后选择元素并附加事件处理程序。或者，使用委托(delegate)事件附加事件处理程序，如下所述。

委托(delegate)事件的优点是它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托(delegate)事件处理程序时保证存在的元素，您可以使用委托(delegate)事件来避免频繁附加和删除事件处理程序的需要。该元素可以是模型- View - Controller 设计中 View 的容器元素，例如，如果事件处理程序想要监视文档中的所有冒泡事件，则可以是文档。文档元素在加载任何其他 HTML 之前位于文档的头部，因此无需等待文档准备就绪即可安全地在此处附加事件。

除了它们能够处理尚未创建的后代元素上的事件之外，委托(delegate)事件的另一个优势是当必须监视许多元素时它们可能会大大降低开销。在 tbody 中有 1,000 行的数据表上，此示例将处理程序附加到 1,000 个元素:

$("#dataTable tbody tr").on("click", function(event){
alert($(this).text());
});

委托(delegate)事件方法仅将事件处理程序附加到一个元素，即 tbody，并且事件只需要向上冒泡一个级别(从单击的 tr 到 tbody):

$("#dataTable tbody").on("click", "tr", function(event){
alert($(this).text());
});

注意:委托(delegate)事件不适用于 SVG。

http://api.jquery.com/on/