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中预先加载的那个.新的一个(和任何其他附加的)添加了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

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

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;
});