jQuery选择动态创建的html元素

There are a lot of asked questions with almost similar titles with this question of mine, but you know I didn't find an answer.

My simple question is: I have button, when I click on it, javascript creates modal window

我的这个问题有很多问题与几乎相似的标题,但你知道我没有找到答案。我的简单问题是:我有按钮,当我点击它时,javascript会创建模态窗口

<div class="aui-dialog">
     html here... 
     <button id="closeButton">Close</button>
</div>

just after <body> tag.

I can bind click event of close button with no problem using jQuery live:

就在标签之后。我可以使用jQuery live绑定关闭按钮的click事件没有问题:

$("#closeButton").live("click", function() { 
    alert("asdf"); // it calls
    $("body").find(".aui-dialog").remove();
});

My problem is, I cannot select that dynamically created modal window div by its classname. So that I could call jQuery .remove() method to make close action. Now I know, I must deal with dynamic elements in another way.

What way?

我的问题是,我无法通过其类名选择动态创建的模态窗口div。这样我就可以调用jQuery .remove()方法来进行关闭操作。现在我知道,我必须以另一种方式处理动态元素。有什么办法?

EDIT:
I think it's important to mention this:
I dont' create the modal window myself, I use liferay portal. It has built-in javascript framework AUI(YUI) that creates that modal window. I can just create that close button inside it in its view.

编辑:我认为重要的是要提到这一点:我不自己创建模态窗口,我使用liferay门户网站。它有内置的javascript框架AUI(YUI),可以创建该模态窗口。我可以在它的视图中创建它内部的关闭按钮。

EDIT 2:
Modal window div class attribute value is: "aui-component aui-panel aui-dialog aui-widget-positioned"

编辑2:模态窗口div类属性值为:“aui-component aui-panel aui-dialog aui-widget-located”

6 个解决方案

#1

~~Create a reference when you're creating the modal window:~~

在创建模态窗口时创建引用:

var modalWindow = $('<div class="aui-dialog">html here... <button id="closeButton">Close</button></div>');
// later...
modalWindow.remove();

To your edit:

要编辑:

Get the window via jQuery's parent when the button is inside the modal window:

当按钮位于模态窗口内时,通过jQuery的父级获取窗口:

$('#closeButton').on('click',function() {
    $(this).parent().remove();
    return false;
});

#2

Since jquery will read the current DOM-state when page loads:

由于jquery将在页面加载时读取当前的DOM状态:

jQuery( document ).ready(function( $ ) {

it will miss the elements you generate post to page load.

它将错过您在页面加载后生成的元素。

One simple solution is to listen for clicks on document, and filter with the class or element-type that you want to use to execute your code. That way jquery will find new elements generated under document, after page load.

一个简单的解决方案是监听文档的点击,并使用您要用来执行代码的类或元素类型进行过滤。这样jquery会在页面加载后找到在文档下生成的新元素。

$(document).on("click", '#closeButton', function(){
$(".aui-dialog").remove();
});

#3

You could do a few things, but first, if you are using jQuery 1.7, better use .on(). it has replaced .live() which is deprecated.

你可以做一些事情,但首先,如果你使用的是jQuery 1.7,最好使用.on()。它已经取代了已弃用的.live()。

if you have no control over the building of the modal but know that the button is a direct child of the modal, then use parent()

如果你无法控制模态的构建,但知道按钮是模态的直接子项,那么使用parent()

$('#closeButton').on('click',function() {
    $(this).parent().remove();
    return false;
});

if the button is somewhere deep in the parent but has a fixed depth from the parent, use parents() which gets all ancestors of the element, and then filter it to a specific depth. if the close was 2 levels deep, the index of :eq() would be 1.

如果按钮位于父级深处但与父级具有固定深度,则使用parents()获取元素的所有祖先,然后将其过滤到特定深度。如果收盘价为2级,则指数为:eq()为1。

$('#closeButton').on('click',function() {
    //where N is zero-indexed integer, meaning first item of the set starts with 0
    $(this).parents(':eq(N)').remove(); 
    return false;
});

another way is to add the handler when the modal is created

另一种方法是在创建模态时添加处理程序

var modal = $('modalHTML');

$('#closeButton',modal).on('click',function(){
    //modal still refers to the whole modal html in this scope
    modal.remove();
});

//show modal

#4

Many users will come on this page when they want to select some element generated runtime by JQuery and it failed, like me.
The solution is simply approach the root (the parent) of your randomly generated element and then get inner by jQuery TAG selection. For example you generate many TDs of users in a table at runtime, the element having your users list is a table with id tblUsers then you can iterate over runtime generated TRs or TDs as following:

当他们想要通过JQuery选择一些生成的运行时元素时,很多用户都会来到这个页面,它就像我一样失败了。解决方案只是接近随机生成的元素的根(父),然后通过jQuery TAG选择获得内部。例如,您在运行时在表中生成许多用户的TD,具有您的用户列表的元素是具有id tblUsers的表,然后您可以迭代运行时生成的TR或TD,如下所示:

$("#tblUsers tr").each(function(i){
    alert('td' + i);
});

further if you have inputs in tds you can go deep in selection as

如果你有tds的输入,你可以深入选择

$("tblUsers tr td input")

Another case could be a randomly generated dialog or popup, then you have to approach its root(parent) and next same selection by TAG as stated above.

另一种情况可能是随机生成的对话框或弹出窗口,然后您必须接近其根(父)和下一个相同的选择,如上所述。

#5

UPDATED:

You can use:

您可以使用:

$(".aui-dialog").live('click', function() {
    $(this).remove();
    return false;
});)

This attach an event handler for all elements which match the current selector, now and in the future. Please not that this method is depreciated in newer version of jQuery and you should consider using .on() instead of .live().

这将为现在和将来与当前选择器匹配的所有元素附加事件处理程序。请注意,此方法在较新版本的jQuery中已弃用,您应考虑使用.on()而不是.live()。

#6

I found an answer, hope it would be helpful for developers who faced with dynamically generated html with IFRAME inside.

If you have a button (#closeButton) inside that IFRAME, and you want select iframe parent window's dom elements, just add second argument window.parent.document for your selector:

我找到了答案,希望对于那些面临动态生成的带有IFRAME的html的开发人员有用。如果IFRAME中有一个按钮(#closeButton),并且你想要选择iframe父窗口的dom元素,只需为你的选择器添加第二个参数window.parent.document:

// This functions is inside generated IFRAME
$("#closeButton").on("click", function() {        
       // body - is your main page body tag
       /* Will alert all html with your dynamically 
          generated html with iframe and etc. */
       alert($('body', window.parent.document).html()); 
       return false;
});

#1