JQuery на загрузку динамического элемента - PullRequest
Новая
       13

JQuery на загрузку динамического элемента

35 голосов
/ 08 марта 2012

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

Скажем, у меня есть контейнер: 

<div id="container"></div>

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

$('#container').on('click', '.sub-element', function() { ... });

Но с чем мне связать, чтобы получить «одноразовый» хук, когда элементдобавляется к #container.Я пытался связать с ready и load безрезультатно.Есть ли способ сделать это, или мне нужно найти другое решение моей проблемы?

Эта скрипка содержит мой нерабочий пример .

Ответы [ 2 ]

36 голосов
/ 08 марта 2012

Вы можете инициировать пользовательское событие во вновь добавленном элементе DOM, которое может быть обработано обработчиком события jQuery: 

//bind to our custom event for the `.sub-element` elements
$('#container').on('custom-update', '.sub-element', function(){
    $(this).html('<b>yaay!</b>');
});

//append a new element to the container,
//then select it, based on the knowledge that it is the last child of the container element,
//and then trigger our custom event on the element
$('#container').append('<div class="sub-element">No worky!</div>').children().last().trigger('custom-update');

Вот демонстрационная версия: http://jsfiddle.net/ggHh7/4/

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

Обновление

Я не уверен в поддержке браузера (я полагаю, IE8 и старшене поддерживает), но вы можете использовать событие мутации DOMNodeInserted, чтобы определить, когда добавлен элемент DOM: 

$('#container').on('DOMNodeInserted', '.sub-element', function(){
    $(this).html('<b>yaay!</b>');
})

$('#container').append('<div class="sub-element">No worky!</div>');

Вот демонстрационная версия: http://jsfiddle.net/ggHh7/7/

ОБНОВЛЕНИЕ

Для этого существует новый API, поскольку в настоящее время DOMNodeInserted устарела.Я не смотрел на это, но это называется MutationOvserver: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

8 голосов
/ 03 марта 2013

После прочтения вышеупомянутого ответа я теперь успешно использую это: 

$('body').on({
   DOMNodeInserted : function(){
      alert('I have been added dynamically');
   },
   click : function(){
      alert('I was clicked');
   },
   '.dynamicElements'
});

Теперь все мои dynamicElements могут делать вещи по мере загрузки, используя потрясающую карту событий .on().

...