Функция прикрепления jQuery к событию load элемента

Question

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

Я пробовал следующее, но это не сработало:

var el = jQuery('<h1>HI HI HI</H1>');   
el.one('load', function(e) {
  window.alert('loaded');
});    
jQuery('body').append(el);

Что я действительно хочу сделать, так это гарантировать, что другая функция jQuery, которая ожидает, что какой-то #id будет на странице, не будет работать, поэтому я хочу вызывать эту функцию всякий раз, когда мой элемент загружается на страницу.

---

Чтобы уточнить, я передаю элемент el в другую библиотеку (в данном случае это проигрыватель фильмов, но это может быть что-то еще), и я хочу знать, когда el элемент добавляется на страницу, независимо от того, является ли он кодом моего проигрывателя фильмов, который он добавляет, или любым другим.

Answer 1

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

Вам нужен плагин livequery , который делает именно это. Последняя функция live похожа, за исключением того, что она не будет вызывать вас при добавлении элемента. Мы используем его все время - прекрасно работает.

Вы будете использовать $('h1').livequery(function() {alert('just added');});

Answer 2

попробуйте переписать метод append, чтобы добавить свое собственное событие?

jQuery.extend(jQuery.fn, {
    _append: jQuery.fn.append,

    append: function(j) {
        this._append(j);
        j.trigger('append');
    }
});

var el = jQuery('<h1>HI HI HI</H1>');   
el.one('append', function(e) {
    window.alert('loaded');
});    
jQuery('body').append(el);

Answer 3

Используйте LiveQuery (плагин jQuery) и прикрепите событие загрузки к элементу ur dom (в этом случае).

Answer 4

Я не знаю, что такое событие такого типа, что приходит на ум, это создание события "el-load" на основе этого учебного пособия, а затем расширение "append", чтобы узнать, является ли элемент имеет это событие сделать вызов.

Answer 5

Попробуйте это:

var el = jQuery('<h1>HI HI HI</H1>');    
jQuery('body').append(el);
setTimeout(function(){
    window.alert('loaded');
},1000);//delay execution about 1 second

или на всякий случай:

var el = jQuery('<h1>HI HI HI</H1>');    
jQuery('body').append(el);
window.checker = setInterval(function(){
    if($('someselector').length>0){ //check if loaded
         window.alert('loaded');             
         clearInterval(window.checker);
    }    
},200);

в основном, это будет повторяться каждые 200 мс, пока селектор не получит результат, и завершит цикл, когда результат будет доступен

Answer 6

В зависимости от браузеров, которые вам необходимо поддерживать, существуют события DOMNodeInserted и DOMNodeInsertedIntoDocument. Не могу поручиться за то, насколько хорошо они работают самостоятельно, но теоретически вы можете связать эти события и затем либо проверить новый узел и возможное поддерево, которое было вставлено, либо просто снова проверить весь документ с помощью $ (селектор) по вашему выбору, чтобы определить узел, который вы ожидаете увидеть добавленным.

Answer 7

Если тег создается с помощью ajax, вы можете использовать связанный узел для подписки на событие ajaxSuccess.

http://docs.jquery.com/Ajax/ajaxSuccess

$('#somenode').ajaxSuccess(function(){
     if ($('h1').length > 0) { ... }
});

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