Вопрос по jquery, jquery-selectors, dynamically-generated, javascript – JQuery выбрать динамически созданный элемент HTML

13

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

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

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

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

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

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

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

Какой способ?

EDIT:
I think it's important to mention this:
Я не & создаю модальное окно сам, используюLiferay портал. Он имеет встроенную структуру JavaScriptAUI(YUI), который создает это модальное окно. Я могу просто создать эту кнопку закрытия внутри нее в своем представлении.

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

@AlmasAdilbek тогда мое решение с$(this).parent().remove(); должно сработать. binarious
Можете ли вы изменить модальное окно исходного кода HTML? "Если да, не можете просто добавитьid="modal-window" к упаковке<div>, а затем использовать$("#modal-window").remove();? sp00m
как вы строите этот модал? эта кнопка в фиксированном положении относительно модального? Joseph
@ sp00m Я не могу создать себя, я использую портал Liferay, встроенное Javascript Framework создает это модальное окно. Я могу просто создать эту кнопку закрытия внутри нее в своем представлении. Almas Adilbek
Кажется, работает хорошо для меняFIDDLE ?? adeneo

Ваш Ответ

6   ответов
0

надеюсь, это будет полезно для разработчиков, которые столкнулись сdynamically сгенерированный 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

UPDATED:

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

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

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

в прямом эфире нужен тип события. но это даже устарело.
немного быстро там - я отредактировал ответ. Спасибо за комментарий.
11

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

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

To your edit:

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

$('#closeButton').on('click',function() {
    $(this).parent().remove();
    return false;
});
Я уверен, что это работает таким образом, но при условии, что модальное окно было создано динамически, оно не работает для меня. ИЛИ, может быть, другая причина из-за (Посмотрите на информацию РЕДАКТИРОВАТЬ 2) Almas Adilbek
@AlmasAdilbek Другие классы не имеют значения. Если кнопка действительно находится внутри .aui-диалога, она работает. Возможно, вам следует сначала проверить DOM и проверить, действительно ли ваша кнопка находится внутри вашего окна.
@AlmasAdilbek это работает для меня:jsfiddle.net/bRqAR/5
Я нашел ответ, из-за iframe, я просто должен добавить второй аргумент (window.parent.document) для селектора:$('body', window.parent.document).find(".aui-dialog").remove();, Спасибо Almas Adilbek
Да, теперь я могу получить доступ к родительскому элементу кнопки закрытия. Но, модальное окно div - это parent (). Parent (). Parent () ... если я предупреждаю об этом:alert($(this).parents(".aui-dialog").html()), он возвращает ноль. Almas Adilbek
7

ицы:

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

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

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

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

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

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

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

$("tblUsers tr td input")

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

3

но сначала, если вы используете 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

Похожие вопросы