jQuery 'on' 未在动态生成的模式弹出窗口中注册
我的印象是 jQuery 的 on 事件处理程序意味着能够监听"动态创建的元素，并且它应该替换 live<的行为/代码>.但是，我的经验是使用 on 没有捕获点击事件，而使用 live 成功！
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 文档的某些部分引用了动态创建的元素以及您在 $("") 查询的一部分需要在运行时存在.
As Claudio mentions, there are portions of the on documentation that reference dynamically created elements and that what you include in the $("") part of the query needs to exist at runtime.
这是我的新解决方案:捕获点击事件on我的模态对话框，虽然它在运行时创建事件时没有任何内容，但将能够找到我的内容和元素具有稍后生成的特殊类.
Here is my new solution: Capture click events on my modal dialog, which, although it does not have any content when the event is created at runtime, will be able to find my content and element with special class that gets generated later.
$("#dialog").on("click", ".classThatExistsInFormToDisplay", function() {
... //(success! Event captured)
});
非常感谢！
推荐答案
live 委托来自文档对象的事件，但是 on 没有，如果你想委托的话使用 on 方法的事件，您应该从元素或 document 对象的静态父对象之一委托事件:
live delegates the event from document object, but on doesn't, if you want to delegate the event using on method, you should delegate the event from one of static parents of the element or document object:
$(document).on("click", ".clickHandle", function() {
alert("Content clicked");
});
相关文章