Всем привет! Как циклически отслеживать событие добавление нового элемента и повесить на него обработчик? Добавление элемента происходит в списке
<ul class="list ">
</ul>
а отслеживать появление (для того, чтобы добавить) нужно его в контейнере
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуУ вас наверняка есть функция которая добавляет элементы в список? Вставьте в конец этой функции триггер. Что-то вроде:
$(".list").trigger("onAddedLi");
И соответственно слушайте это событие:
$(".list").on("onAddedLi", function(){
// Обработчик события
})
.trigger("onAddedLi")
и один .on("onAddedLi")
, первый вариант был бы не хуже.
onAddedLi
прекрасно работает. Хотите использовать событие change
- пожалуйста, замените в примере обе строки onAddedLi
на change
и вперёд.
added_to_cart
у вас же вызывается для элемента body
- ну и так и слушать надо на нем же!
22 июн 2015 в 5:20
Это можно сделать в последних браузерах (Chrome, Mozilla, IE11) через MutationObserver:
(function () {
// select the target node
var target = $(".list").get(0);
// create an observer instance
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
// mutation.mutationType будет равен "childList"
// новый li будет в mutation.addedNodes
alert($(mutation.addedNodes[0]).text());
});
});
// configuration of the observer:
var config = { childList: true };
// pass in the target node, as well as the observer options
observer.observe(target, config);
// добавляем элементы:
$(".list").append($("<li>new item 1</li>"));
$(".list").append($("<li>new item 2</li>"));
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
</ul>
В старых - через DOM Mutation Events (не уверен насчет IE 10-, в нем вроде не работало):
$(document).bind('DOMNodeInserted', function(e) {
var element = e.target;
setTimeout(function() {
$(element).fadeOut(1000, function() {
$(this).remove();
});
}, 2000);
});
Или можно взять готовую библиотеку, https://github.com/naugtur/insertionQuery (поддерживает IE10+, работает через CSS3 Animation)
Возможно, так? Вместо 'click' естественно, может быть любое событие...
$('.list').on('click', 'li', function(){
//Код
})
setInterval
, в функции которого будет вручную проверяться не поменялся ли HTML у контейнера. Четвёртый вариант - использовать устаревшее (что вообще не рекомендуется)DOMNodeInserted
событие и связанные с ним.$.when()
принимает в качестве параметра объект типаDeferred
, а.append()
возвращает объекта типаjQuery
. Это раз. Второе -$.when()
предназначен не для обработки периодически возникающих событий. Поэтому "не подойдёт". Варианты описаны выше. Один из них с примером размещён в ответе ниже.