jQuery выберите динамически созданный элемент html

На этот вопрос есть много задаваемых вопросов с почти похожими заголовками, но вы знаете, что я не нашел ответа.

Мой простой вопрос: у меня есть кнопка, когда я нажимаю на нее, javascript создает модальное окно

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

сразу после <body>.

Я могу связать событие нажатия кнопки закрытия без проблем с помощью jQuery live:

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

Моя проблема в том, что я не могу выбрать динамически созданный modal window div по его имени класса. Чтобы я мог вызвать метод jQuery.remove(), чтобы сделать близкое действие. Теперь я знаю, что я должен иметь дело с динамическими элементами по-другому.

Каким образом?

РЕДАКТИРОВАТЬ:
Я считаю важным отметить это:
Я не создаю модальное окно самостоятельно, я использую портал liferay. Он имеет встроенную структуру javascript AUI (YUI), которая создает это модальное окно. Я могу просто создать эту закрытую кнопку внутри этого в своем представлении.

EDIT 2:
Значение атрибута класса div модального окна: "aui-component aui-panel aui-dialog aui-widget-position"

Ответы

Ответ 1

~~Создайте ссылку, когда вы создаете модальное окно:~~

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

К вашему редактированию:

Получите окно через parent jQuery, когда кнопка находится внутри модального окна:

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

Ответ 2

Поскольку jquery будет считывать текущее состояние DOM при загрузке страницы:

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

он будет пропускать элементы, которые вы создаете после загрузки страницы.

Одним простым решением является прослушивание кликов по документу и фильтрация с типом класса или элемента, который вы хотите использовать для выполнения кода. Таким образом, jquery найдет новые элементы, созданные в документе, после загрузки страницы.

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

Ответ 3

Вы могли бы сделать несколько вещей, но сначала, если вы используете jQuery 1.7, лучше используйте .on(). он заменил .live() который устарел.

если у вас нет контроля над зданием модального, но знайте, что кнопка является прямым потомком модального, затем используйте parent()

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

если кнопка находится где-то глубоко в родительском, но имеет фиксированную глубину от родителя, используйте parent 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;
});

другим способом является добавление обработчика при создании модаля

var modal = $('modalHTML');

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

//show modal

Ответ 4

Многие пользователи придут на эту страницу, когда они захотят выбрать какой-то элемент, сгенерированный во время выполнения JQuery, и это провалилось, как и я.
Решение просто подходит к корню (родительскому) вашего произвольно сгенерированного элемента, а затем получает внутренний выбор jQuery TAG. Например, вы генерируете много TD пользователей в таблице во время выполнения, элемент, имеющий список ваших пользователей, представляет собой таблицу с идентификаторами tblUsers, тогда вы можете выполнять итерацию по генерируемым TR или TD следующим образом:

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

если у вас есть входы в tds, вы можете вдаваться в

$("tblUsers tr td input")

Другим случаем может быть случайно сгенерированный диалог или всплывающее окно, тогда вы должны подойти к его корневому (родительскому) и следующему же выбору с помощью TAG, как указано выше.

Ответ 5

ОБНОВЛЕНО:

Вы можете использовать:

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

Это присоединяет обработчик событий для всех элементов, которые соответствуют текущему селектору, сейчас и в будущем. Пожалуйста, не то, что этот метод обесценивается в более новой версии jQuery, и вы должны рассмотреть возможность использования .on() вместо .live().

Ответ 6

Я нашел ответ, надеюсь, что это будет полезно для разработчиков, столкнувшихся с динамически генерируемым html с IFRAME внутри.

Если у вас есть кнопка (#closeButton) внутри этого IFRAME, и вы хотите выбрать window.parent.document элементы iframe parent, просто добавьте второй аргумент 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;
});