Блог

Главная - Вопросы по программированию - jQuery: как добавить элемент после того, как элемент появится с помощью AJAX?

jQuery: как добавить элемент после того, как элемент появится с помощью AJAX?

#javascript #jquery

#javascript #jquery

Вопрос:

У меня есть модальный, который загружается через AJAX (у меня нет доступа к файлам JS, которые запускают это).

Я хочу использовать jQuery для добавления некоторого HTML-кода в тело модального.

Если, конечно, я не могу просто сделать это в document.ready функции.

Есть ли способ добавить HTML, когда в DOM появляется другой элемент?

Я пробовал

     $('.npopup .description').load(function(){
        $(this).append(message);
    });

и

     $('.npopup .description').ready(function(){
        $(this).append(message);
    });

безрезультатно.

Комментарии:

1. В зависимости от библиотеки, используемой для отображения модального, может быть событие, которое вы можете прослушать. Например, в Bootstrap есть shown.bs.modal событие

2. после ajaxStop или ajaxComplete вы можете найти элемент и, если он найден, на основе этого вы можете добавить.

Ответ №1:

Вы можете использовать ajaxComplete() подобное:

 $( document ).ajaxComplete(function( event, xhr, settings ) {
  if ( settings.url === "ajax/test.html" ) {
    $(this).append(message);
  }
});

Убедитесь, что вы взглянули на event , xhr и settings чтобы вы могли найти интересующий вас запрос. В противном случае, если вы не используете if оператор в теле обратного вызова, вы будете добавлять сообщение при каждом вызове ajax.

Другим возможным решением является прослушивание изменений в DOM с помощью MutationObserver . Смотрите, например, здесь: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver .

Однако MutationObserver — лучшее решение, но я не помню, какова совместимость с браузерами. Вообще говоря, совместимость довольно хорошая.