Question

有没有办法循环遍历页面加载后添加的动态元素？像这样......

if ($('#myFlag').length < 2) {
    $(document).on('each', '.myEm', function(){
        $(this).remove();
    });
}

如果它在click上，它就可以正常工作，但不能在each上工作。为了澄清，我想知道如何我可以在动态添加的元素上执行上述操作，而不会将首先添加该元素的事件链接起来。换句话说，当添加DOM元素时，是否存在可以利用的通用事件？

Answer 1

为什么不直接定位并删除它们？请注意以下示例...

$('.myEm').remove()

JSFiddle Link - 简化演示

如果您想“监听”正在添加的这些元素并在该触发器上执行此逻辑，也许您可以订阅DOMSubtreeModified或DOMNodeInserted突变事件。请注意以下内容......

$(document).on('DOMSubtreeModified', function() { // or DOMNodeInserted
    $('.myEm').remove();
});

JSFiddle Link - DOM突变事件演示

MutationObservers也可能在这里被利用，并且在提供更多控制权时也是首选。这方面的一个例子可能包括以下内容......

var config = { attributes: true, childList: true, characterData: true };

var target = document.querySelector('body');

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {

        // check if added node has class myEm
        if($(mutation.addedNodes).hasClass('myEm')) {

            // -- timeout for visual demonstration
            setTimeout(function() {
                $(mutation.addedNodes).remove(); // .myEm
            }, 1000);
        }
    });    
});

observer.observe(target, config);

JSFiddle Link - 变异观察者的例子

将.each（）绑定到动态添加的元素

1 个答案: