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

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

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

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

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

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

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

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

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

EDIT:
я думаю, что важно отметить, это:
Я не создаю модальное окно сам, я использую liferay. Он имеет встроенный JavaScript framework AUI(YUI) это создает это модальное окно. Я могу просто создать эту кнопку закрытия внутри него в его представлении.

EDIT 2:
Значение атрибута класса div модального окна:"aui-компонент aui-панель aui-диалог aui-виджет-позиционируется"

13
dynamically-generated javascript jquery jquery-selectors

6 ответов

создайте ссылку при создании модального окна:

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

для редактирования:

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

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

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

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

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

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

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

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

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

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

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

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

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

далее, Если у вас есть входы в tds, вы можете углубиться в выбор как

$("tblUsers tr td input")

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

3

обновление:

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

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

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

0

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

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