jQuery'on'没有在动态生成的模态弹出窗口中注册

Question

我的印象是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是1.8.21.

这里有两个jsFiddles来解决这个问题.单击两个实例中的单词"Test"以查看不同的行为.在代码的唯一区别是更换on了live.

当点击被抓获live.

当点击不是由捕获on(点击"测试-点击我"看到没有发生).

我意识到我可能只是on不恰当地使用或要求它做一些不打算但我想知道为什么它不起作用(但如果你有一些非常聪明的东西,随意分享).谢谢你的智慧!

更新/解答/解决方案:

根据用户'undefined',不同之处在于on没有从document对象的顶部一直委托,live而是/是.

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

这是我的新解决方案:捕获点击事件on我的模态对话框,虽然它在运行时创建事件时没有任何内容,但是能够找到我的内容和元素,后面会生成特殊的类.

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

非常感谢!

Answer 1

live从文档对象委托事件,但on如果要使用on方法委托事件,则应该委托事件来自元素或document对象的静态父节点之一:

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