使用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)....

   湾 如果您想做其他事情,请使用bind自定义事件和jQuerytriggerHandler

   $("#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.