jQuery select dynamically created html element

A

6

17

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

<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:

$("#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?

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.

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

Archie answered 23/4, 2012 at 12:29 Comment(5)

how do you build that modal? is that button in a fixed position relative to the modal? – Anchorite 23/4, 2012 at 12:33

Can you change the modal window HTML source code? 'Cause if yes, can't you just add an id="modal-window" to the wrapping <div>, and then use $("#modal-window").remove();? – Karol 23/4, 2012 at 12:36

Seems to be working fine for me FIDDLE ?? – Ninos 23/4, 2012 at 12:37

@Karol I cannot create myself, I use liferay portal, built-in javascript framework creates that modal window. I can just create that close button inside it in its view. – Archie 23/4, 2012 at 12:39

@AlmasAdilbek then my solution with $(this).parent().remove(); should work. – Hardwick 23/4, 2012 at 12:40

H

12

~~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:

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

Hardwick answered 23/4, 2012 at 12:31 Comment(6)

Yes, now I can access parent element of close button. But, modal window div is parent().parent().parent()... if I alert this: alert($(this).parents(".aui-dialog").html()), it returns null. – Archie 23/4, 2012 at 12:59

I'm sure it works that way, but assuming that modal window was created dynamically, it doesn't work for me. OR, maybe other reason is because of (Look at EDIT 2 info) – Archie 23/4, 2012 at 13:19

@AlmasAdilbek The other classes are irrelevant. If the Button is really inside the .aui-dialog, it works. Maybe you should inspect the DOM first and check if your button really is inside your window. – Hardwick 23/4, 2012 at 13:21

I found the color of problem, modal window content is generated in iframe. Using jQuery I cannot access html elements outside the iframe tag with parent().parent()... way. Any idea? – Archie 24/4, 2012 at 3:25

I found answer, because of iframe, I just must add second argument (window.parent.document) for selector: $('body', window.parent.document).find(".aui-dialog").remove();. Thx – Archie 24/4, 2012 at 8:35

@AlmasAdilbek Awesomely awesome. Learned something new. Thanks. – Pratique 6/8, 2016 at 1:23

E

15

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

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.

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

Etymon answered 1/7, 2014 at 16:1 Comment(0)

H

12

~~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:

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

Hardwick answered 23/4, 2012 at 12:31 Comment(6)

Yes, now I can access parent element of close button. But, modal window div is parent().parent().parent()... if I alert this: alert($(this).parents(".aui-dialog").html()), it returns null. – Archie 23/4, 2012 at 12:59

I'm sure it works that way, but assuming that modal window was created dynamically, it doesn't work for me. OR, maybe other reason is because of (Look at EDIT 2 info) – Archie 23/4, 2012 at 13:19

@AlmasAdilbek The other classes are irrelevant. If the Button is really inside the .aui-dialog, it works. Maybe you should inspect the DOM first and check if your button really is inside your window. – Hardwick 23/4, 2012 at 13:21

I found the color of problem, modal window content is generated in iframe. Using jQuery I cannot access html elements outside the iframe tag with parent().parent()... way. Any idea? – Archie 24/4, 2012 at 3:25

I found answer, because of iframe, I just must add second argument (window.parent.document) for selector: $('body', window.parent.document).find(".aui-dialog").remove();. Thx – Archie 24/4, 2012 at 8:35

@AlmasAdilbek Awesomely awesome. Learned something new. Thanks. – Pratique 6/8, 2016 at 1:23

M

5

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:

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

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

$("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.

Malcolmmalcom answered 23/1, 2014 at 14:28 Comment(0)

A

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.

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

$('#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.

$('#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

Anchorite answered 23/4, 2012 at 12:40 Comment(0)

A

0

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().

Anteater answered 23/4, 2012 at 12:40 Comment(2)

live needs an event type. but it's even deprecated. – Hardwick 23/4, 2012 at 12:50

a little quick there - I have edited the answer. thanks for the comment. – Anteater 23/4, 2012 at 12:59

A

0

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:

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

Archie answered 24/4, 2012 at 8:45 Comment(0)

Recommended topics

Hot tags