9

我的印象是 jQuery 的on事件处理程序旨在能够“监听”动态创建的元素，并且它应该替换live. 但是，我所经历的是 usingon没有捕获点击事件，而 usinglive是成功的！

我的情况的棘手方面是，我不仅在动态创建内容，而且通过 AJAX.get()调用来完成它，并将生成的 HTML 插入到模态.dialog()jQueryUI 弹出窗口中。

这是我试图完成的简化版本（包含在 中$(document).ready(...)）：

$.get("getUserDataAjax.php", queryString, function(formToDisplay) {
    $("#dialog").dialog({
        autoOpen: true,
        modal: true,
        buttons...
    }).html(formToDisplay);
});
$(".classThatExistsInFormToDisplay").on("click", function() {
    alert("This doesn't get called");
});

从我的文档中on我发现这就是我编写on活动的方式：

$("p").on("click", function(){
    alert( $(this).text() );
});

但是，由于某种原因，live它将按我的预期工作——而on我却失败了。

这不是“我怎样才能让它工作”的问题，因为我发现如果我在回调中声明on它会成功（捕获点击） 。function(formToDisplay)

我的问题是：on在模态弹出窗口中找不到我动态创建的元素有什么问题？我的 jQuery 实例是 jquery-1.7.2。jQueryUI 是 1.8.21。

这是两个近似该问题的jsFiddles。在两个实例中单击“测试”一词以查看不同的行为。代码的唯一区别是替换onfor live。

点击被捕获的位置live。

未捕获单击的位置on（单击“测试-单击我”以查看没有任何反应）。

我意识到我可能只是使用on不当或要求它做一些不打算做的事情，但我想知道它为什么不起作用（但如果你有一些非常聪明的东西，请随时分享）。谢谢你的智慧！

更新/回答/解决方案：

根据用户“未定义”，不同之处在于on不是从document对象的顶部一直委托，而live确实/是。

正如克劳迪奥所提到的，on文档的某些部分引用了动态创建的元素，并且您在$("")查询部分中包含的内容需要在运行时存在。

这是我的新解决方案：捕获单击事件on我的模态对话框，虽然它在运行时创建事件时没有任何内容，但将能够找到我的内容和具有稍后生成的特殊类的元素。

$("#dialog").on("click", ".classThatExistsInFormToDisplay", function() {
    ... //(success! Event captured)
});

非常感谢！

4

2 回答 2

10

live从文档对象委托事件，但on不委托，如果要使用on方法委托事件，则应从元素或document对象的静态父对象之一委托事件：

$(document).on("click", ".clickHandle", function() {
    alert("Content clicked");
});
于 2012-10-02T12:26:14.903 回答
4

问题是您附加事件的元素必须存在。

您必须on像这样使用来捕获对p动态创建的标签的点击

$("#existingContainerId").on("click", "p", function(){
    alert( $(this).text() );
});

如果您没有相关的现有容器可供使用，您可以使用$("body")或$(document)

如果选择器被省略或为空，则事件处理程序被称为直接或直接绑定。每次在所选元素上发生事件时都会调用处理程序，无论它是直接发生在元素上还是来自后代（内部）元素的冒泡。

当提供选择器时，事件处理程序被称为委托。当事件直接发生在绑定元素上时，不会调用处理程序，而只会调用与选择器匹配的后代（内部元素）。jQuery 将事件从事件目标冒泡到附加处理程序的元素（即，从最里面到最外面的元素），并为沿着该路径匹配选择器的任何元素运行处理程序。

事件处理程序仅绑定到当前选定的元素；当您的代码调用 .on() 时，它们必须存在于页面上。为确保元素存在并且可以被选择，请在页面 HTML 标记中的元素的文档就绪处理程序内执行事件绑定。如果将新 HTML 注入页面，请在将新 HTML 放入页面后选择元素并附加事件处理程序。或者，使用委托事件来附加事件处理程序，如下所述

查看此处的直接和委托事件 部分以 获取更多详细信息

于 2012-10-02T12:25:51.903 回答