jQuery的“上”未注册在动态生成的模式弹出(jQuery 'on' not re

我是jQuery的印象下on事件处理程序，是为了能够“听”动态创建的元素，它本来是要替代的行为live 。然而，我所经历的，使用on没有捕获click事件，而使用live正在取得成功！

我的情况棘手的方面是，我不仅是动态创建的内容，但我通过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的是21年8月1日。

这里有两个jsFiddles是近似的问题。点击单词“测试”在这两种情况下，看到不同的行为。在代码的唯一区别是更换on进行live 。

当点击被捕获的live 。

当点击不是通过捕捉on （点击“测试-点击我”看到没有发生）。

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

更新/答案/解决方案：

根据用户“未定义”，不同的是， on未从顶部一路授权document对象，而live确实/是。

克劳迪奥提到，也有部分on文件引用动态创建的元素和你在包括$("")的查询的一部分需要在运行时存在 。

这里是我的新的解决方案：捕获点击事件on我的模态对话框，该对话框，虽然它不具有当运行时创建事件的任何内容时，就能找到我的内容和元素与被以后版本生成的特殊阶层。

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

非常感谢！

Answer 1:

live代表从文档对象的事件，但on不，如果你想使用委派事件on方法，你应该从要素或静态父母一方委托的事件document对象：

$(document).on("click", ".clickHandle", function() {
    alert("Content clicked");
});

Answer 2:

问题是，该元素指您在该事件已存在。

你必须使用on这样捕捉到的点击p动态创建的标签

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

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

如果省略选择器或为空，则事件处理程序被称为直接或直接结合的。该处理程序被调用每一个事件所选择的元件发生时，无论直接从发生的后代（内）元素的元素或气泡上。
当提供一个选择器，该事件处理程序被称为委托。当事件发生时，直接结合的元件上，但只适用于选择器匹配的后代（内部元件）处理程序不被调用。 jQuery的气泡从该事件的事件定位到其中附加处理程序（即，最内层到最外层的元素）并运行沿该路径选择器匹配的任何元素的处理程序的元件。
事件处理程序是仅结合到当前选择的元素; 它们必须存在在页面上当时您的代码调用。对（）。 为了确保元件存在，并且可以选择，执行事件文件准备处理程序内对于那些在页面上的HTML标记元素结合。如果新的HTML被注入页面中，选择元素和附加的事件处理程序的新的HTML被放置到页面后。或者，使用委派事件附加一个事件处理程序，如下所述

看看节直接和委托的事件 在这里了解更多详情

文章来源: jQuery 'on' not registering in dynamically generated modal popup