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中的新元素。有没有办法让我能够让这两个工作都没有我不必写这两次，或者打电话给另一个函数？

这是一个截图：

所以，这里有一个更深入的描述它是如何工作的。

<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中预先加载的那个。新的一个（和任何其他附加的）添加了click事件，而第一个没有

@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官方网站上复制的内容，它可以非常清楚地解释 ： 事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码调用.on（）时页面上。要确保元素存在且可以选择，请在文档就绪处理程序中为HTML中的元素执行事件绑定页面上的标记。 如果将新HTML注入页面，请在将新HTML放入页面后选择元素并附加事件处理程序。或者，使用委托事件附加事件处理程序，如下所述。

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

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

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

委托事件方法只将一个事件处理程序附加到一个元素tbody，而事件只需要冒出一个级别（从点击的tr到tbody）：

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

注意：委派事件不适用于SVG。

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

Answer 2

否如果你创建这样的新元素，那么你需要重新绑定事件处理程序。

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

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

    bindHandler();
    return false;
});