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

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

Feature-detect: mutation-event availability in JavaScript?

Answer 3

如果客户端浏览器支持它，您可以在此fiddle：

中执行此操作

</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

测试div创建

3 个答案: