2009-11-17 2 views
9

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

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

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

То, что я действительно хочу сделать это, чтобы гарантировать, что другая функция JQuery, что ожидает некоторый #ID быть на странице доном 't fail, поэтому я хочу вызвать эту функцию, когда мой элемент загружается на страницу.


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

+1

Почему бы не назвать свою другую функцию JQuery сразу после того, как вы приложили элемент? – joshcomley

+0

Потому что это не я, который добавляет элемент. –

ответ

1

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

1

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

0

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

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

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

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

+0

То, что я не получаю, это то, что нужно использовать для раздела #somenode. – crosenblum

+0

#somenode - ваш селектор, обратитесь к jQuery docs: http: //api.jquery.com/category/selectors/ –

1

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

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); 
+0

Элемент добавляется через сторонний код. Итак, перехват метода «append» мне не пригодится. –

+0

Кто такой третья сторона, вы могли бы переопределить метод append аналогичным образом? насколько я знаю, событие загрузки только срабатывает на элементах, которые фактически загружаются в другой файл, например img, script и iframe. –

0

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

-1

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

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 мс, пока селектор не получает результат, и завершает цикл, когда результат доступен

+0

ewww ... setTimeout – BMiner

2

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

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

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

Смежные вопросы