jquery - 测试 div 创建

Question

我正在使用drupal，它有一个为每个聊天创建div 的聊天模块。因为它是一个外部模块，我不想修改代码。我的问题是这样的：

如果另一个脚本创建了一个 div，jquery 有没有办法触发事件？我是否必须每 X 秒测试一次，或者类似的东西？

Answer 1

也许是这样的：

$('#myDiv').bind('DOMNodeInserted DOMNodeRemoved', function(event) {
    if (event.type == 'DOMNodeInserted') {
        alert('Content added! Current content:' + '\n\n' + this.innerHTML);
    } else {
        alert('Content removed! Current content:' + '\n\n' + this.innerHTML);
    }
});

有了它，您可以检查是否已将某些内容添加到某个 div。因此，如果在 myDiv 中插入了某些内容，它将触发您收听的事件，然后执行某些操作。

Answer 2

这就是新的突变事件规范的用途。即使它仍处于早期阶段，您也可以根据需要支持的浏览器来使用它。

功能检测：JavaScript 中的突变事件可用性？

Answer 3

如果客户端浏览器支持它，你可以像这个小提琴一样做：

</div>
    <input type="button" onclick="javascript: create_div();" value="create"/>
    <div id="div-area"></div>​
    <script>
    function create_div() {
        $('#div-area').append('<div class="chatdiv">new chat</div>');
    }
    $(document).ready(function() {
        $('#div-area').bind('DOMNodeInserted', function(e, o) {
            $(e.target).css('background', 'red');
        });
    });
    </script>
</div>

根据您的评论，您需要注册到 onclick。这live()是为了：

</div>
    <input type="button" onclick="javascript: create_div();" value="create"/>
    <div id="div-area"></div>​
    <script>
    function create_div() {
        $('#div-area').append('<div class="chatdiv">new chat</div>');
    }
    $(document).ready(function() {
        $('#div-area div.chatdiv').live('click', function(e, o) {
            $(e.target).css('background', 'red');
        });
    });
    </script>
</div>

jsfiddle。