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

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

о чем я мечтаю оф:

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

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

5 57
html jquery

5 ответов:

The .livequery() плагин до сих пор служит этой нише нужно, как это:

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

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

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

25

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

см. @ dain's answer ниже.

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

обычно, если вы добавляете класс элементов в 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);
});

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

35

Если вы живете на переднем крае вы можете использовать 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/

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

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

21

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

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

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

7

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

1