Есть ли событие jquery, которое срабатывает, когда новый node вставлен в dom?

Есть ли событие jquery при срабатывании элемента dom, когда оно вставлено в dom?

например. скажем, я загружаю некоторый контент через ajax и добавляю его в DOM, а в другой части javascript я могу добавить событие с использованием .live(), так что, когда событие, соответствующее определенному селектору, добавляется в DOM, событие срабатывает при упомянутом элемент. Подобно $(document).ready(), но по содержимому, которое динамически добавляется в DOM.

О чем я мечтаю:

$('.myClass').live('ready', function() {
    alert('.myClass added to dom');
});

Если jquery не поддерживает такую вещь, есть ли другой способ достичь этой функциональности, не изменяя код, который фактически выполняет начальную манипуляцию dom?

Ответы

Ответ 1

.livequery() плагин по-прежнему выполняет эту нишу, например:

$('.myClass').livequery(function() {
  alert('.myClass added to dom');
});

Если вы передадите ему только функцию обратного вызова, как описано выше, она будет выполняться для каждого нового найденного элемента, как изначально, так и по мере добавления. Внутри функции this ссылается на элемент с добавленной добавкой.

.live() прослушивает события, которые пузырятся, поэтому не соответствует этой ситуации "когда элементы добавлены", в этом отношении .livequery() (плагин) не был полностью заменен добавлением .live() до ядра, только часть пузырьков событий (по большей части) была.

Ответ 2

устаревший: согласно комментарию @Meglio ниже, событие DOMNodeInserted устарело и будет удалено из Интернета в какое-то неподдельное время в будущем. Для получения наилучших результатов начните изучение API MutationObserver.

см. @dain answer ниже.

Если вы привязываете 'DOMNodeInserted' событие к документу или телу напрямую, он будет выполняться каждый раз, когда что-либо будет вставлено в любом месте. Если вы хотите, чтобы callback запускался только при добавлении определенного типа элемента, было бы разумно использовать делегированные события.

Обычно, если вы добавляете класс элементов в DOM, вы добавляете их в общий родитель. Поэтому присоедините обработчик событий следующим образом:

$('body').on('DOMNodeInserted', '#common-parent', function(e) {
  if ($(e.target).attr('class') === 'myClass') {
    console.log('hit');
  }
});

В основном такой же ответ, как Myke выше, но поскольку вы используете делегированный обработчик событий, а не прямой обработчик событий, код там будет уволен реже.

Примечание:

$('body').on('DOMNodeInserted', '.myClass', function(e) {
  console.log(e.target);
});

Кажется, это тоже работает... но я не знаю почему.

Ответ 3

Если вы живете на переднем крае, вы можете использовать MutationObserver:)

  var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
  var list = document.querySelector('ol');

  var observer = new MutationObserver(function(mutations) {  
    mutations.forEach(function(mutation) {
      if (mutation.type === 'childList') {
        var list_values = [].slice.call(list.children)
            .map( function(node) { return node.innerHTML; })
            .filter( function(s) {
              if (s === '<br>') {
                return false;
              }
              else {
                return true;
              }
        });
        console.log(list_values);
      }
    });
  });

  observer.observe(list, {
    attributes: true, 
    childList: true, 
    characterData: true 
   });

Смотрите: https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/

Изменить: этот ответ довольно старый, теперь MutationObserver поддерживается всеми браузерами, кроме Opera Mini: http://caniuse.com/#feat=mutationobserver

Кроме того, здесь прямая ссылка API на MDN: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Ответ 4

Нет события jQuery, но есть событие DOM: DOMNodeInsertedIntoDocument. Вы можете прослушивать события DOM с помощью jQuery по методу. Итак:

$('.myClass').on('DOMNodeInsertedIntoDocument', function() {
  alert('myClass was inserted into the DOM');
}

Это может быть предпочтительнее использовать liveQuery, поскольку этот плагин немного устарел (без обновлений для 2+ лет, только promises поддержка jQuery 1.2.x).

Ответ 5

Взгляните на insertionQuery. Это интересная библиотека, которая использует CSS для обнаружения новых элементов. Поскольку он использует CSS, нет производительности, и вы возвращаете фактические элементы, соответствующие селектору.