Как я могу определить, когда новый элемент был добавлен в документ в jquery?

Question

Как я могу определить, когда в документ был добавлен новый элемент в jquery?

Объяснение: Я хочу знать, когда в документ был добавлен элемент с классом "header-header"Как я планирую запустить некоторые элементы JavaScript на этих элементах.

Как я могу это сделать?Я использую библиотеку jQuery javascript.

Answer 1

$(document).bind('DOMNodeInserted', function(e) {
    console.log(e.target, ' was inserted');
});

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

Ссылка: MDC

Answer 2

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

Сегодня MutationObserver - это то, что вы должны использовать для определения, когда элемент был добавлен в DOM. MutationObservers теперь широко поддерживаются во всех современных браузерах (Chrome26+, Firefox 14+, IE11, Edge, Opera 15+ и т. Д.).

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

Для краткости я использую синтаксис jQuery для построения узла и вставки его в DOM.

var myElement = $("<div>hello world</div>")[0];

var observer = new MutationObserver(function(mutations) {
   if (document.contains(myElement)) {
        console.log("It's in the DOM!");
        observer.disconnect();
    }
});

observer.observe(document, {attributes: false, childList: true, characterData: false, subtree:true});

$("body").append(myElement); // console.log: It's in the DOM!

Обработчик событий observer будет запускаться всякий раз, когда любой узел добавляется или удаляетсяот document.Внутри обработчика мы затем выполняем contains проверку, чтобы определить, находится ли myElement в document.

. Вам не нужно перебирать каждый MutationRecord, хранящийся в mutations, потому что вы можетевыполните проверку document.contains непосредственно на myElement.

. Для повышения производительности замените document на определенный элемент, который будет содержать myElement в DOM.

Answer 3

Если вы хотите сделать jQuery, вы также можете сделать что-то вроде livequery (дополнительный плагин) :

$('column-header').livequery(function()
{
    // do things here with your column-header, like binding new events and stuff.
    // this function is called when an object is added.
    // check the API for the deletion function and so on.
});

UPDATE : похожечто ссылка была сломана.Попробуйте эту ссылку

Answer 4

Я бы использовал setInterval для многократной проверки элемента.например.

var curLength=0;
setInterval(function(){
  if ($('.column-header').length!=curLength){
    curLength=$('.column-header').length;
    // do stuff here
  }
},100);

этот код будет проверять наличие новых элементов .colum-header каждые 100 мс

Answer 5

Я думаю, что упомянутый выше метод DOMNodeInserted, вероятно, самый сексуальный выбор, но если вам нужно что-то, что будет работать с IE8 и ниже, вы можете сделать что-то вроде следующего:

// wrap this up in en immediately executed function so we don't 
// junk up our global scope.
(function() {
   // We're going to use this to store what we already know about.
   var prevFound = null;

   setInterval(function() {
      // get all of the nodes you care about.
      var newFound = $('.yourSelector');

      // get all of the nodes that weren't here last check
      var diff = newFound.not(prevFound);

      // do something with the newly added nodes
      diff.addClass('.justGotHere');

      // set the tracking variable to what you've found.
      prevFound = newFound;
   }, 100);
})();

Это просто основная идея, вы можете изменить то, что вы хотите, сделать из него метод, сохранить возвращаемое значение setInterval, чтобы вы могли остановить его или все, что вам нужно сделать. Но это должно сделать работу.

Answer 6

Вы должны проверить jQuery Mutation Events . Я считаю, что это то, что вы ищете.

Answer 7

До 2013 года MutationEvents устарели.Если у кого-то еще есть проблемы с обнаружением новых элементов в домене, вы можете использовать вместо него MutationObservers: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Answer 8

Как насчет использования опроса - продолжайте искать элемент с классом "column-header", пока не найдете его, а затем выполните действие. Кажется простым.

Answer 9

, если вы хотите установить одинаковые функции для всех элементов класса column-header Тогда вы можете использовать jquery live ()

$(".column-header").live("click",function(){});

Answer 10

попробуйте это ...

if($('.column-header')){  
//do something...
} 

или вы также можете сделать что-то вроде этого ... это будет более общим

jQuery.exists = function(selector) { return ($(selector).length > 0); }

if ($(selector).exists()) {
  // Do something
}