4

我将单击事件绑定到 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>

谁能告诉我，为什么委托不为我工作？

4

3 回答 3

6

从 1.7.live()开始，已弃用并由.on().delegate()取代

$("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); 
});
于 2012-01-10T16:08:09.860 回答
4

您的错误是您没有正确指定哪些元素应该触发事件处理程序（使用 的第一个参数中的选择器delegate）以及哪个父元素负责触发事件（使用启动链接的 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() {
    // ...
});
于 2012-01-10T16:06:00.097 回答
1

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

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

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

如果您想通过更改为 delegate() 来精确复制 live() 的行为，

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

变成：

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

重要的是要注意，通过将 $(document) 保留在 delegate() 调用中，您不会获得任何东西。您应该将此选择器更改为将在其中创建动态元素的更具体的容器。

于 2012-01-10T16:24:29.587 回答