Question

我将click事件绑定到div元素，该元素是在单击按钮后创建的。我正在使用.live（），这是有效的。我听说，我不应该使用.live，而是.delegate（）。所以我试过了，但它没有用，但是.live正在工作。

我的工作jQuery：

$(".myDiv").live("click",function () {
    var Pos = $(this).offset();
    $("#Container").css("left", Pos.left).css("top", Pos.top);
});

无效的jQuery：

$(".myDiv").delegate("div","click",function () {
    var Pos = $(this).offset();
    $("#Container").css("left", Pos.left).css("top", Pos.top);
});

我的div

的HTML

<div class="myDiv"></div>

有谁能告诉我，为什么代表不为我工作？

Answer 1

截至1.7 .live()已被弃用且.delegate()已被.on()

取代

$("body").on("click","div.myDiv",function () { 
    var Pos = $(this).offset(); 
    $("#Container").css("left", Pos.left).css("top", Pos.top); 
});

.on()现在是超级活页夹;）

尝试绑定到目标最接近的东西，它肯定会包含它，最好是带有ID的东西：

<div id="mainContent">
    <div class="myDiv"></div><!-- Dynamically created div -->
</div>

这里的一个伟大目标是#mainContent

$("#mainContent").on("click","div.myDiv",function () { 
    var Pos = $(this).offset(); 
    $("#Container").css("left", Pos.left).css("top", Pos.top); 
});

Answer 2

你的错误是你没有正确指定哪些元素应该触发事件处理程序（使用delegate的第一个参数中的选择器）以及哪个父元素负责触发事件（使用选择器启动链接的jQuery对象。

正确的方法就像

$("body").delegate("div.myDiv","click",function () { 
    var Pos = $(this).offset(); 
    $("#Container").css("left", Pos.left).css("top", Pos.top); 
});

请参阅examples for delegate。

对于jQuery 1.7及更高版本，delegate（以及所有其他事件绑定方法）已被on方法取代，该方法将以完全相同的方式使用：

$('body').on('click','div.myDiv',function() {
    // ...
});

Answer 3

如果您使用的是1.7+，则应考虑切换到.on()，以下是您的代表问题的答案：

jQuery live()实际上将事件处理程序绑定到整个widow.document对象，如果源与您的选择器匹配，它将询问每个事件（与您给定的事件类型匹配）。如果是这样，它将触发处理程序。这允许您处理来自动态添加元素的事件。

jQuery delegate()与live（）类似，不同之处在于您可以为容器指定选择器而不仅仅是window.document。这意味着您将查询较少数量事件的来源，从而获得更好的性能。

如果您想通过更改为delegate（），

来完全复制live（）的行为

$(selector).live('eventType', handlerFunc);

变为：

$(document).delegate(selector, 'eventType', handlerFunc);

重要的是要注意，通过将$（文档）保留在delegate（）调用中，您没有获得任何东西。您应该将此选择器更改为更具体的容器，以便创建动态元素。

jQuery：live（）和delegate（）

3 个答案: