jQuery: live() 和 delegate()

Question

我正在将点击事件绑定到一个div元素上，该元素是在单击按钮后创建的。 我使用.live()方法，这个方法有效。 听说我不应该使用.live()方法，而应该使用.delegate()方法。 所以我尝试了一下，但是.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>

有人能告诉我，为什么委托对我不起作用吗？

- Keith L.

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

- Sinetheta

Answer 2

您的错误在于没有正确指定哪些元素应该触发事件处理程序（使用委托方法的第一个参数中的选择器），以及哪个父元素负责触发事件（使用jQuery对象中开始链接的选择器）。正确的方式应该像这样：

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

请参考delegate的示例。

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

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

- Jon

---

当然，只有在使用jQuery 1.7+时才能使用$('body').on('click','div.myDiv',function()...)。 - Blazemonger

“on” 不一定是一个委托。你仍然可以使用它的“bind”方式：el.on(event, eventHandler)。 - gion_13

Answer 3

如果你正在使用1.7+的版本，那么你应该考虑切换到.on()，但是这里有一个关于委派问题的答案:

jQuery live() 本质上将事件处理程序绑定到整个window.document对象，它会检查每个事件（与给定的事件类型匹配的事件），以确定源是否与您的选择器相匹配。 如果匹配，则触发事件处理程序。 这使您可以处理来自动态添加的元素的事件。

jQuery delegate() 类似于live()，除了你可以指定容器的选择器而不仅仅是window.document。 这意味着您将更少地查询事件的来源，因此具有更好的性能。

如果你想通过切换到delegate()来精确复制live()的行为,

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

变成：

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

重要的是注意，在delegate()调用中保留$(document)不会带来任何好处。您应该将此选择器更改为更具体的容器，以便创建动态元素。

- jbabey