1

Всем привет! Как циклически отслеживать событие добавление нового элемента и повесить на него обработчик? Добавление элемента происходит в списке

<ul class="list ">
</ul>

а отслеживать появление (для того, чтобы добавить) нужно его в контейнере

3
  • 1
    Самый простой способ - перенести добавление элемента и обработчик в одну функцию и добавлять элемент только через эту функцию. Другой вариант - добавление элемента опять-таки только через функцию, но вместо размещения кода обработчика в ней же генерировать какое-то своё событие. А контейнеру повесить обработчик этого события. Третий вариант уже невесёлый - повесить setInterval, в функции которого будет вручную проверяться не поменялся ли HTML у контейнера. Четвёртый вариант - использовать устаревшее (что вообще не рекомендуется) DOMNodeInserted событие и связанные с ним.
    – Regent
    19 июн 2015 в 10:15
  • @Regent а если такой способ - не подойдет? $.when($('.list').append($("<li>")).done(function(){}
    – Вася
    19 июн 2015 в 10:15
  • 1
    $.when() принимает в качестве параметра объект типа Deferred, а .append() возвращает объекта типа jQuery. Это раз. Второе - $.when() предназначен не для обработки периодически возникающих событий. Поэтому "не подойдёт". Варианты описаны выше. Один из них с примером размещён в ответе ниже.
    – Regent
    19 июн 2015 в 10:32

3 ответа 3

7

У вас наверняка есть функция которая добавляет элементы в список? Вставьте в конец этой функции триггер. Что-то вроде:

$(".list").trigger("onAddedLi");

И соответственно слушайте это событие:

$(".list").on("onAddedLi", function(){
    // Обработчик события
})
19
  • Пожалуй, из предложенных 4 вариантов этот действительно самый удачный и гибкий. Хотя в ситуации когда во всём коде есть один .trigger("onAddedLi") и один .on("onAddedLi"), первый вариант был бы не хуже.
    – Regent
    19 июн 2015 в 10:46
  • @Regent может вариант и хороший, но у меня не срабатывает..
    – Вася
    19 июн 2015 в 10:52
  • 1
    @Вася не срабатывает - это уже вопрос к вам, а не к варианту. Вот пример в fiddle, в котором onAddedLi прекрасно работает. Хотите использовать событие change - пожалуйста, замените в примере обе строки onAddedLi на change и вперёд.
    – Regent
    19 июн 2015 в 11:07
  • 1
    @Вася простая проверка на количество детей с помощью setInterval: пример.
    – Regent
    19 июн 2015 в 11:11
  • 1
    Вася, ну что вы так невнимательны? Событие added_to_cart у вас же вызывается для элемента body - ну и так и слушать надо на нем же! 22 июн 2015 в 5:20
3

Это можно сделать в последних браузерах (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)

1

Возможно, так? Вместо 'click' естественно, может быть любое событие...

$('.list').on('click', 'li', function(){
  //Код
})
5
  • пробую через 'append' или он не работает с li? $('.list').on('append', 'li', function(){//Код })
    – Вася
    21 июн 2015 в 8:25
  • может к li нужно класс add применять?
    – Вася
    21 июн 2015 в 8:35
  • а я могу как-то отследить добавление селектора с помощью wait.until или его аналога и не имеющего класса li.hasClass("empty")?
    – Вася
    21 июн 2015 в 16:52
  • append - это не событие. Событие - это "click, change и т.д.". Вам необходимо узнать основы jquery, прежде чем писать подобный код. Помимо официального ресурса jquery ещё рекомендую сайт по jquery на русском
    – DES
    21 июн 2015 в 19:38
  • спасибо, но я ухватился за возможный ваша вариант решения, но уже понял, что мне он не подойдет, т.к. 'click' мне не подходит...
    – Вася
    21 июн 2015 в 19:54

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.