Detect element content changes with jQuery

change() function works and detects changes on form elements, but is there a way of detecting when a DOM element's content was changed?

This does not work, unless #content is a form element

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

I want this to trigger when doing something like:

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

Also html() or append() function don't have a callback.

Any suggestions?

234510 次浏览
小开

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

我应该说不可能没有一些讨厌的间隔在背景中嘎嘎作响！

小开
最佳答案

这些是 突变事件。

我没有在 jQuery 中使用突变事件 API，但是粗略地搜索了一下 GitHub 上的 这个项目。我不知道这个项目已经成熟了。

小开

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

see this post here on SO:

我该如何监控世界的变化

小开

试试这个，它是由詹姆斯帕多尔西(J-P 在这里的 SO)和做你想要的(我认为)

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

小开

The browser will not fire the onchange event for <div> elements.

I think the reasoning behind this is that these elements won't change unless modified by javascript. If you are already having to modify the element yourself (rather than the user doing it), then you can just call the appropriate accompanying code at the same time that you modify the element, like so:

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

你也可以手动触发这样的事件:

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

如果这两种解决方案都不适合你的情况，你能否提供更多的信息，说明你正在努力实现的具体目标？

小开

试试 livequery 插件，它似乎对我正在做的类似的事情有效。

Http://docs.jquery.com/plugins/livequery

小开

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

您可以通过创建一个总是负责修改 DOM 的中心函数来实现这一点。然后，从这个函数中对修改后的元素进行所需的清理。

在最近的一个应用程序中，我不需要立即采取行动，所以我使用了一个手动 load ()函数的回调函数，将一个类添加到任何修改过的元素中，然后使用 setInterval 计时器每隔几秒钟更新所有修改过的元素。

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

然后你可以想怎么处理就怎么处理。

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

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

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

  2. 但是，如果由于某种原因(你使用的是一个复杂的插件或者找不到任何“回调”的可能性) ，那么我建议使用 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
});

Here's a link to jQuery trigger handler: http://api.jquery.com/triggerHandler/

小开

有了 HTML5，我们就有了 原生 DOM 突变观测器。

小开

那 http://jsbin.com/esepal/2呢

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

这个事件已经为了有利于 变异观察者应用程序接口而被否定了

小开

I'm developing tiny JS library called mutabor (https://github.com/eskat0n/mutabor) which intended to simplify usage of DOM Mutation Events. See demo.html for examples.

小开

您可以向 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 树中的一个元素，然后设置“在属性更改时中断”:

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

当脚本中的某个属性发生更改时，将出现调试窗口，您可以跟踪调试窗口的运行情况。下面还有一个元素插入和元素删除的选项(被屏幕截图中的弹出窗口遮挡了)。

小开

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

例如:

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

提交答案