Question

请问我真的不是编码员。

当孩子被添加到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，但是接缝似乎已被弃用...我看到了proxy（），但我不知道如何使用它...

我的变异观察者代码：

  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
        });

但是不能在移动设备上工作。

Answer 1

突变观察器工作得很好，并且不被弃用。我用它所有的时间。这是一个侦听事件然后警告是否添加或减少了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

拦截DOM更改

1 个答案: