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

Ответ 1

Если вы хотите сделать некоторые 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: Кажется, что связь была нарушена. Попробуйте эту ссылку

Ответ 2

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

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

Ссылка: MDC

Ответ 3

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

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

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

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

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

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

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

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

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

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

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

Ответ 4

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

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

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

Ответ 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, чтобы вы могли остановить его или что бы вы ни делали. Но он должен выполнить свою работу.

Ответ 6

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

Ответ 7

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

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

Ответ 8

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

Ответ 9

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

Ответ 10

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

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

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

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

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