“对'不登记在动态生成模式弹出的jQuery弹出、模式、动态、jQuery

2023-09-10 16:24:59 作者:没房没车木有钻戒

我下的是IM pression的jQuery的 事件处理程序,是为了能够'听'动态创建的元素,它本来是要取代的 生活 。然而,我所经历的是,使用未捕获click事件,而使用生活正在取得成功!

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 获得()通话这样做,并插入合成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.

下面是什么,我试图完成(包裹在 $(文件)。就绪(...))的简化版本:

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");
});

从上为的说明文件,我发现这里面它是如何我已接近上事件写我的

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() );
});

然而,出于某种原因,生活将工作,我期待 - 而失败我

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

这不是我怎样才能使它发挥作用的问题,因为我发现,会成功(捕获点击)如果我宣布它的在的的函数(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.

我的问题是:什么是错的,它不是在一个模式弹出找到我的动态创建的元素呢?我的jQuery实例的jQuery 1.7.2。 jQueryUI的是21年8月1日。

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是近似的问题。点击在这两种情况单词测试,看看不同的行为。在code唯一不同的是将生活

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.

如果点击由捕捉住

如果点击由未抓获(点击测试 - 点击我看到没有发生)

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

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

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!

更新/答案/解决方案:

据用户未定义,所不同的是未授权一路从文件顶部对象,而生活确实/是。

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.

由于克劳迪奥提到,还有的引用动态创建的元素在文档部分的和的是你在 $()部分的需要在运行时存在

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.

这是我的新的解决方案:捕获点击事件我的模态对话框,其中,虽然它没有在运行时创建的事件时的任何内容,就能够寻找我的内容和元素与被后来产生的特殊阶层。

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 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");
});