使用jQuery检测元素内容更改

Question

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

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

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

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

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

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

有什么建议？

Answer 1

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

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

2. 但如果由于任何原因（你使用的是一个复杂的插件或者找不到任何“回调”的可能性）这是不可能的话，那么我建议的jQuery方法是：

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

   湾 如果您想做其他事情，请使用jQuery与自定义事件和triggerHandler的bind

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

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

Answer 2

这些是突变事件 。

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

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上看到这篇文章：

如何-DO-显示器最DOM换的变化

Answer 6

试试这个，它是由詹姆斯·帕德西（James Padolsey）创建的（这里的JP就是这样）并且完全符合你的要求（我认为）

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

Answer 7

使用HTML5，我们有原生的DOM Mutation Observers 。

Answer 8

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

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

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

Answer 9

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

Answer 10

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

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

Answer 11

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

在这里演示。

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

Answer 12

通常，实现此目的的一种简单有效的方法是跟踪修改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 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

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

例如 ：

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

Answer 15

不可能，我相信ie有一个内容改变的事件，但它肯定不是x浏览器

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