Jquery - запустить функцию при добавлении элемента DOM

Question

У меня есть веб-сайт с jQuery и jQuery UI. У меня есть функция Javascript:

function ToButton()
{
$(".ToButton").button();
}

Эта функция запускается после загрузки страницы и изменения всех элементов с помощью класса "ToButton".

Также я меняю HTML-код, когда пользователь нажимает кнопку. E.g.:

$("body").append('<span class="ToButton">Test Button</span>');

И я хочу запустить функцию ToButton и для этого нового элемента, но методы live или делегата в jQuery не имеют типа события «show» или «create». Поэтому мне нужно вызвать функцию ToButton () после всех изменений HTML-кода.

Можете ли вы помочь мне, как я могу делегировать функцию ToButton всем элементам?

Answer 1

Вы можете достичь этого несколькими способами:

1) Использовать события мутации или наблюдателей

Первый метод легко найти, вы можете найтибольше о событиях мутации DOM уровня 3 здесь: http://help.dottoro.com/ljmcxjla.php - и новые наблюдатели мутации DOM уровня 4 здесь: https://developer.mozilla.org/en-US/docs/DOM/MutationObserver

Хотя события мутации DOM уровня 3 широко поддерживаются, они являются устаревшим APIэто может убить производительность в определенных браузерах.# 2 ниже использует метод, который работает во всех браузерах, которые поддерживают CSS-анимацию, и это не снижает производительность.

2) Используйте метод события CSS Keyframe Animation, который я разработал для обнаружения вставок узла DOM

Вы можете использовать фиктивное событие анимации ключевого кадра для всплывающего уведомления о событии вставки всякий раз, когдаузел анализируется внутренними механизмами стилевого оформления браузера, я написал очень подробный пост по этому вопросу здесь: http://www.backalleycoder.com/2012/04/25/i-want-a-damnodeinserted/

Answer 2

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

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

Answer 3

Вы можете создать простую функцию, подобную этой:

function AddButton (parent, buttonElement) {
    $(buttonElement).addClass('.ToButton').appendTo($(parent)).button();
}

Используйте как

AddButton('body', '<span>Test Button</span>');

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

Конечно, лучше всего использовать события DOM, но благодаря IE мы не можем.

Answer 4

хм, не уверен, правильно ли я понял, но разве это не работает?:

$("body").append( $('<span class="ToButton">Test Button</span>').button() )

только для вашего удобства: http://www.bennadel.com/blog/1751-jQuery-Live-Method-And-Event-Bubbling.htm