Question

change()函数可以工作并检测表单元素的变化，但有没有办法检测DOM元素的内容何时被更改？

这不起作用，除非#content是表单元素

$("#content").change( function(){
    // do something
});

我希望在执行以下操作时触发：

$("#content").html('something');

html()或append()函数也没有回调。

有什么建议吗？

Answer 1

我知道这篇文章已经有一年了，但我想为遇到类似问题的人提供不同的解决方案：

jQuery更改事件仅用于用户输入字段，因为如果操作了其他任何内容（例如div），则该操作来自代码。因此，找到操作发生的位置，然后添加您需要的任何内容。
但如果由于任何原因（你使用的是一个复杂的插件或者找不到任何“回调”的可能性）这是不可能的话，那么我建议的jQuery方法是：

一个。对于简单的DOM操作，使用jQuery链接和遍历$("#content").html('something').end().find(whatever)....

湾如果您想做其他事情，请使用jQuery的bind自定义事件和triggerHandler
```
$("#content").html('something').triggerHandler('customAction');

$('#content').unbind().bind('customAction', function(event, data) {
   //Custom-action
});
```

这是jQuery触发器处理程序的链接：http://api.jquery.com/triggerHandler/

Answer 2

这些是mutation events。

我没有在jQuery中使用变异事件API，但粗略搜索使我在GitHub上this project。我不知道该项目的成熟度。

Answer 3

http://jsbin.com/esepal/2

怎么样？

$(document).bind("DOMSubtreeModified",function(){
  console.log($('body').width() + ' x '+$('body').height());
})

此活动已被弃用，有利于Mutation Observer API

Answer 4

浏览器不会触发<div>元素的onchange事件。

我认为这背后的原因是除非通过javascript修改，否则这些元素不会改变。如果您已经必须自己修改元素（而不是用户这样做），那么您可以在修改元素的同时调用相应的附带代码，如下所示：

 $("#content").html('something').each(function() { });

您也可以手动触发如下事件：

 $("#content").html('something').change();

如果这些解决方案都不适用于您的情况，请您提供更多有关您要特别尝试完成的信息？

Answer 5

尝试绑定到DOMSubtreeModified事件seeign，因为test也只是DOM的一部分。

在SO上看到这篇文章：

how-do-i-monitor-the-dom-for-changes

Answer 6

试试这个，它是由James Padolsey（J-P在这里做的）创造的，并且完全符合你的要求（我认为）

http://james.padolsey.com/javascript/monitoring-dom-properties/

Answer 7

使用HTML5，我们有native DOM Mutation Observers。

Answer 8

这不是严格的jQuery答案 - 但提及调试很有用。

在Firebug中，您可以右键单击DOM树中的元素并设置“Break on Attribute Change”：

Element right-click in Firebug with Break on Attribute Change highlighted

当在脚本中更改属性时，将出现调试窗口，您可以跟踪它的运行情况。下面还有一个元素插入和元素删除选项（屏幕抓取中的弹出窗口无法掩盖）。

Answer 9

尝试使用livequery插件。这似乎与我正在做的事情有关。

http://docs.jquery.com/Plugins/livequery

Answer 10

我正在开发名为mutabor（https://github.com/eskat0n/mutabor）的小型JS库，旨在简化DOM Mutation Events的使用。有关示例，请参阅demo.html。

Answer 11

通常，一种简单有效的方法是跟踪修改DOM的时间和地点。

您可以通过创建一个始终负责修改DOM的中心函数来完成此操作。然后，您可以在此函数中对修改后的元素执行任何清理操作。

在最近的一个应用程序中，我不需要立即执行操作，因此我使用handly load（）函数的回调，向任何已修改的元素添加一个类，然后使用setInterval计时器每隔几秒更新所有已修改的元素。

$($location).load("my URL", "", $location.addClass("dommodified"));

然后你可以随意处理 - 例如

setInterval("handlemodifiedstuff();", 3000); 
function handlemodifiedstuff()
{
    $(".dommodified").each(function(){/* Do stuff with $(this) */});
}

Answer 12

您可以为html（或任何）函数添加回调选项：

$.fn.oldHtml = $.fn.html;
$.fn.html = function(html,fn){
  fn = fn || function(){};
  var result =  this.oldHtml(html);
  fn();
  return result;
};
$('body').html(11,function(){alert("haha");});

Demo here.

你对某个元素进行了更改，而不是强迫元素被你必须捕获的东西改变。

Answer 13

我编写了一个片段，用于检查事件中元素的更改。

因此，如果您使用的是第三方javascript代码或某些内容，并且您需要知道何时出现或在您点击时发生更改，那么您可以。

对于以下代码段，假设您需要知道点击按钮后表格内容何时发生变化。

$('.button').live('click', function() {

            var tableHtml = $('#table > tbody').html();
            var timeout = window.setInterval(function(){

                if (tableHtml != $('#table > tbody').
                    console.log('no change');
                } else {
                    console.log('table changed!');
                    clearInterval(timeout);
                }

            }, 10);
        });

伪代码：

点击按钮后
捕获您希望更改的元素的html
然后我们不断检查元素的html
当我们发现html不同时，我们停止检查

Answer 14

我们可以通过变异事件来实现这一目标。根据www.w3.org，突变事件模块旨在允许通知文档结构的任何更改，包括attr和文本修改。有关详细信息MUTATION EVENTS

例如：

$("body").on('DOMSubtreeModified', "#content", function() {
    alert('Content Modified'); // do something
});

Answer 15

不可能，我相信ie有一个内容改变的事件，但肯定不是x-browser

如果没有一些讨厌的间隔在背景中消失，我应该说不可能！

使用jQuery检测元素内容更改

15 个答案: