6

我有这个：

$(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.ini 中的同一个。新的（以及添加的任何其他附加的）与 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]
4

2 回答 2

2

下面是我从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/

于 2013-03-11T04:37:36.027 回答
-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;
});
于 2013-03-11T03:58:51.370 回答