javascript - DOM 对象创建事件

Question

如何触发每次创建 div 时触发的事件？

我在想一些类似的事情，但显然不是。

$("#content").on("create", "div.block", function () {
    $(this).css({"background-color":"#FF0000"});
});

我发现了 MutationObserver ( https://stackoverflow.com/a/11546242/165737 )，但是如评论中所见，这在 IE 中不起作用。

Answer 1

您可以使用突变事件（DOMNodeInserted）...但是 IE 可能无法完全处理它。

http://jsfiddle.net/kasperfish/AAd8f/

$(function() {
    $('#btn').click(function(){
        $('body').append('<div style="width:30px;height:30px;border:1px solid black"></div>');
    });


    $(document).on('DOMNodeInserted', function(e) {

        $(e.target).addClass('blue');
    });
});

我想指出，最好使用回调事件而不是监听 DOM。将 div 插入 DOM 后，您需要编写回调。我认为没有其他（非hacky）方法可以做到这一点。

Answer 2

您可以尝试类似的方法而不是MutationObserver来在将 adiv.block添加到div#content

$(function(){
    var c = $('#content'), l = c.find('.block').length;
    setInterval(function(){
        var lOld = l;
        if(c.find('.block').length > lOld) {
            l = c.find('.block').length;
            c.find('.block').css({"background-color":"#FF0000"});
        }
    }, 100);
});

一个例子，这里是另一个具有多重Background color效果的例子。