1

У меня есть документ, окончание его загрузки я обрабатываю так:

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

После этого я меняю DOM, например так:

$("#elem").html("<img src='big.jpg'")

Как мне отловить, когда загрузка документа после изменения DOM закончится? Код выше срабатывает один раз, при изменении документа он не срабатывает.

Причем закончится с загрузкой всех элементов, которые указаны в новом html?

1
  • метод html сразу вставляет элемент в dom, поэтому ждать ничего не надо
    – Grundy
    12 апр 2018 в 18:57

1 ответ 1

1

Есть несколько вариантов.

Воспользоваться MutationObserver:

$(function(){
  $('#test').text(Math.random());
  
  $('#btn').on('click', function(){
    $('#test').text(Math.random());
  });
  
  (new MutationObserver(function(mutations){
    let mutation = mutations.find(e => e.addedNodes.length);
    
    if(mutation){
      $('#notification').html('Changed to ' + mutation.addedNodes[0].textContent);
    }
  })).observe($('#test')[0], {childList: true});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='test'></span><br />
<input type='button' id='btn' value='Change!' />
<div id='notification'></div>

Ещё один интересный вариант предложен на enSO:

$(function(){
  $('#test').text(Math.random());
  
  $('#btn').on('click', function(){
    $('#test').text(Math.random()).triggerHandler('customContentModification');
  });
  
  $('#test').unbind().bind('customContentModification', function(event, data) {
    $('#notification').html('Changed to ' + $(this).text());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='test'></span><br />
<input type='button' id='btn' value='Change!' />
<div id='notification'></div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.