Перехват изменений DOM - PullRequest
Новая
       34

Перехват изменений DOM

0 голосов
/ 25 октября 2018

Пожалуйста, я действительно не кодер.

Мне нужно перехватить, когда ребенок присоединяется к div.

как этот пример (без таймаута): 

$(document).ready(function(){
  setTimeout(function(){
    $('#holder').append('<div id="device">Test</div>');}, 2000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div id="holder">
    <!––child dynamicly inserted-->
  </div>
</body>

Я использую mutationobserver, но швы кажутся устаревшими ... Я видел прокси (), но я не знаю, как его использовать ...

Мой код наблюдателя мутации: 

  MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
var observer = new MutationObserver(function(mutations, observer) {
    mutations.forEach(function(mutation) {  

        if ($('#main-view div.row').next().length != 0 ){
            DelRow();
        };

        $('#main-view div.row.divider .span4').toggleClass('span4 tile');

    });
});

    $( document ).ready(function() {
        if (!isMobile){ 
        observer.observe(targetedNode, {
            childList: true,
            subtree: true
        });

Но не работайте на мобильном телефоне ..

1 Ответ

0 голосов
/ 26 октября 2018

Наблюдатель мутаций работает очень хорошо и НЕ устарел.Я пользуюсь этим все время.Вот пример, который прослушивает события и затем предупреждает, был ли Div добавлен или вычтен.Старайтесь изо всех сил применять методы из этой демонстрации в вашем случае использования.

<div id="holder">
  <h2>Let's Add Div's Dynamically</h2>
</div>

<button id="button" type="button">Add New Div</button>

<script>
    const btn = $('#button');
    const holder = $('#holder');

    // append a new div to out holder element
    function addDiv(){
        holder.append('<div>A Great New Div!! :D</div>'); 
    }

    // attach click function to btn
    btn.click(addDiv);



    // Create an observer instance linked to the callback function
    var observer = new MutationObserver(function(mutationsList, observer) {
        $(mutationsList).each(function(index, item){
            if (item.type === 'childList'){

                if (item.addedNodes.length > 0){
                    alert('new div is being added!');
                }

                if (item.removedNodes.length > 0){
                    alert('div has been removed'); 
                }

            }
        });
    });

    // Start observing the target node for configured mutations
    observer.observe(holder[0], { 
        attributes: true, 
        childList: true, 
        subtree: true 
    });
</script>

JS Fiddle Demo

...