Запустите функцию jQuery для `<li>`, которая добавляется динамически - PullRequest
Новая
       32

Запустите функцию jQuery для `<li>`, которая добавляется динамически

1 голос
/ 17 октября 2019

Мне нужно запустить функцию jQuery для любого нового <li>, который добавляется / добавляется в список <ul>, сразу после его добавления. Мы могли бы начать с: 

<ul id="my">
  <li></li>
  <li></li>
</ul>

После некоторого события на странице, но без обновления страницы, мы имеем это: 

<ul id="my">
  <li></li>
  <li></li>
  <li></li> <!-- Added dynamically -->
</ul>

Я хочу запустить функцию jQuery для этого (и снова о любом будущем) новый <li>.

С помощью функции .on я могу отследить любое изменение, которое происходит с переносом <ul>: 

jQuery('body').on('DOMSubtreeModified', 'ul#my', function() {
  ...
});

Как настроить это, чтобы не отследить никаких изменений внутри <ul>, но чтобы поймать конкретный <li>, который добавляется? Что-то вроде: 

jQuery('body').on('DOMSubtreeModified', 'NEW_LI', function() {
  NEW_LI.css("background-color", "yellow");
});

1 Ответ

0 голосов
/ 17 октября 2019

API MutationObserver - рекомендуемый способ просмотра модификаций DOM. Его также легко интегрировать.

Обязательно проверьте переменную mutation, чтобы понять, к какой информации вы можете обращаться. 

function createObserver(callback) {
    return new MutationObserver(function (mutationRecords) {
        mutationRecords.forEach(callback);
    });
}

$("ul").each(function () {
    var obs = createObserver(function (mutation) {
        $(mutation.addedNodes).css("background-color", "yellow");
        setTimeout(function () {
            $(mutation.addedNodes).css("background-color", "");
        }, 1000);
    });
    obs.observe(this, { childList: true });
});


// ---------------------------------------------------------------

setTimeout(function () {
    $("<li>New content appears!</li>").appendTo("ul#my");
}, 2000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="my">
  <li>existing content</li>
  <li>existing content</li>
  <li>existing content</li>
</ul>
...