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

I was under the impression that jQuery's on event handler was meant to be able to 'listen' for dynamically created elements AND that it was supposed to replace the behavior of live. However, what I have experienced is that using on is not capturing the click event whereas using live is succeeding!

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

The tricky aspect of my situation is that I am not only dynamically creating content but I'm doing it via an AJAX .get() call, and inserting the resultant HTML into a modal .dialog() jQueryUI popup.

这是我试图完成的简化版本(包装在 $(document).ready(...) 中):

Here is a simplified version of what I was trying to accomplish (wrapped in $(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 事件的方式:

From the documentation for on I found this which which was how I was approaching writing my on event:

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

但是，出于某种原因，live 会按我的预期工作——而 on 让我失望了.

However, for some reason, live will work as I expect -- whereas on is failing me.

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

This isn't a question for "how can I make it work" because I have found that on will succeed (capture clicks) if I declare it inside the function(formToDisplay) callback.

我的问题是: on 有什么问题，它没有在模式弹出窗口中找到我动态创建的元素?我的 jQuery 实例是 jquery-1.7.2.jQueryUI 是 1.8.21.

My question is: what is wrong with on that it isn't finding my dynamically created elements within a modal popup? My jQuery instance is jquery-1.7.2. jQueryUI is 1.8.21.

这里有两个近似问题的 jsFiddles.在两个实例中单击测试"一词以查看不同的行为.代码的唯一区别是将 on 替换为 live.

Here are two jsFiddles that approximate the issue. Click the word "Test" in both instances to see the different behavior. The only difference in code is replacing on for live.

点击被live捕获.

点击未被 on 捕获(点击测试- 点击我'看什么都没有发生).

Where the click is NOT captured by on (click 'Test - click me' to see nothing happen).

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

I realize I may just be using on inappropriately or asking it to do something that was not intended but I want to know why it is not working (but if you have something terribly clever, feel free to share). Thanks for your wisdom!

更新/回答/解决方案:

根据用户未定义"，区别在于 on 不是从 document 对象的顶部一直委托，而 live 确实/是.

According to user 'undefined', the difference is that on is not delegated all the way from the top of the document object whereas live does/is.

正如 Claudio 所提到的，on 文档的某些部分引用了动态创建的元素以及您在 $("") 查询的一部分需要在运行时存在.

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

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