Javascript 使用jQuery检测元素内容更改

change（）

函数工作并检测表单元素的更改，但是否有方法检测DOM元素的内容何时更改

除非

#content

是表单元素，否则这不起作用

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

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

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

而且

html（）

或

append（）

函数没有回调

---

有什么建议吗？

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

我要说的是，如果没有一些令人讨厌的间隔在背景中隆隆作响，这是不可能的

这些是

---

我没有在jQuery中使用突变事件API，但粗略的搜索让我在GitHub上找到了它。我不知道项目的成熟度。

尝试绑定到

domsubtremodified

事件seeign，因为测试也是DOM的一部分

请参见此处的帖子，以便：

---

试试这个，它是由詹姆斯·帕多尔西（J-p）创建的，完全符合你的要求（我想）

---

浏览器不会为

元素触发onchange事件

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

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

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

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

---

如果这两种解决方案都不适用于您的情况，请您提供更多信息，说明您特别想要实现的目标。

试试livequery插件。这似乎适用于我正在做的类似的事情

---

实现这一点的一个简单而有效的方法通常是跟踪何时何地修改DOM

您可以通过创建一个始终负责修改DOM的中心函数来实现这一点。然后在此函数中对修改后的元素执行所需的清理

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

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

然后你可以随心所欲地处理它-例如

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

---

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

jQuery更改事件仅用于用户输入字段，因为如果操作了其他任何内容（例如div），则该操作来自代码。因此，找到操作发生的位置，然后添加您需要的内容

但如果出于任何原因（您使用的是复杂的插件或找不到任何“回调”可能性），那么我建议使用jQuery方法：

a。对于简单的DOM操作，使用jQuery链接和遍历，

$（“#content”）.html（'something'）.end（）.find（无论什么）…

b。如果您想做其他事情，请使用jQuery的

bind

和定制事件以及

triggerHandler

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

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

这里有一个到jQuery触发器处理程序的链接：

我们已经有了HTML5。

那怎么办

此事件已被弃用，取而代之的是

---

我正在开发名为mutabor（）的小JS库，它旨在简化DOM变异事件的使用。有关示例，请参见demo.html。

您可以向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");});

---

您对某个元素进行更改，而不是您必须捕获的内容迫使该元素进行更改。

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

因此，如果您使用的是第三方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不同时，我们停止检查

---

严格来说，这不是一个jQuery答案，但对于调试来说很有用

在Firebug中，您可以右键单击DOM树中的元素并设置“属性更改时中断”：

---

当脚本中的某个属性发生更改时，将出现“调试”窗口，您可以跟踪它的运行情况。下面还有一个插入和删除元素的选项（屏幕抓图中的弹出窗口将其完全隐藏）。

我们可以通过使用突变事件来实现这一点。根据www.w3.org，突变事件模块的设计允许通知文档结构的任何更改，包括attr和文本修改。更多细节

例如：

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

---

这个变异事件插件不起作用，因为它只是将事件挂钩到jQuery变异方法中。当jQuery本身试图更改元素时，它们被激发，而不是当元素从jQuery外部更改时。他们不监视文档上的更改。看看这个小插件吧：谷歌搜索并发布一个指向你从未尝试过的库的链接并不是非常有用。（评论是因为我在否决投票时被提示这样做。）；不要使用它们。替代突变事件的方法似乎是。最后考虑。尽管这在上面应该是相当全面的：您可以使用#content html更新隐藏输入字段的值，然后将更改事件绑定到隐藏输入字段：）大量选项+1“查找操作发生的位置，然后在那里添加所需的内容。”在没有任何黑客/插件的情况下，在2秒内修复了我的问题：）我在这里建议的唯一更改是

bind

希望您的处理程序返回$("body").on('DOMSubtreeModified', "#content", function() { alert('Content Modified'); // do something });