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

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

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

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

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

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

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

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

Ответ 1

Вы можете инициировать настраиваемое событие для вновь добавленного элемента 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/

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

Update

Я не уверен в поддержке браузера (предположим, что 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/

UPDATE

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

Ответ 2

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

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

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