为内容更改创建jQuery特殊事件

我正在尝试创建一个jQuery特殊事件，当绑定的内容发生更改时触发该事件。 我的方法是使用setInterval检查内容，并检查内容是否从上次更改。 如果你有更好的方法，请告诉我。 另一个问题是我似乎无法清除间隔。 无论如何，我需要的是使用event.special检查内容更改的最佳方法。

(function(){ var interval; jQuery.event.special.contentchange = { setup: function(data, namespaces) { var $this = $(this); var $originalContent = $this.text(); interval = setInterval(function(){ if($originalContent != $this.text()) { console.log('content changed'); $originalContent = $this.text(); jQuery.event.special.contentchange.handler(); } },500); }, teardown: function(namespaces){ clearInterval(interval); }, handler: function(namespaces) { jQuery.event.handle.apply(this, arguments) } }; })(); 

然后像这样绑定它：

 $('#container').bind('contentchange', function() { console.log('contentchange triggered'); }); 

我得到console.log’内容已更改’，但没有得到console.log’内容更改触发’。 所以很明显，回调永远不会被触发。

我只是使用Firebug来更改内容并触发事件，以测试它。

更新
我认为我不够清楚，我的代码实际上并不起作用。 我正在寻找我做错了什么。

这是任何感兴趣的人的完成代码

 (function(){ var interval; jQuery.event.special.contentchange = { setup: function(){ var self = this, $this = $(this), $originalContent = $this.text(); interval = setInterval(function(){ if($originalContent != $this.text()) { $originalContent = $this.text(); jQuery.event.handle.call(self, {type:'contentchange'}); } },100); }, teardown: function(){ clearInterval(interval); } }; })(); 

感谢Mushex帮助我。

Answer 1

另外看看James 类似的脚本 （声明为jquery对象方法而不是事件）

 jQuery.fn.watch = function( id, fn ) { return this.each(function(){ var self = this; var oldVal = self[id]; $(self).data( 'watch_timer', setInterval(function(){ if (self[id] !== oldVal) { fn.call(self, id, oldVal, self[id]); oldVal = self[id]; } }, 100) ); }); return self; }; jQuery.fn.unwatch = function( id ) { return this.each(function(){ clearInterval( $(this).data('watch_timer') ); }); }; 

并创造特殊事件

 jQuery.fn.valuechange = function(fn) { return this.bind('valuechange', fn); }; jQuery.event.special.valuechange = { setup: function() { jQuery(this).watch('value', function(){ jQuery.event.handle.call(this, {type:'valuechange'}); }); }, teardown: function() { jQuery(this).unwatch('value'); } }; 

无论如何，如果你只需要它作为事件，你的脚本很好:)

Answer 2

我知道这个post/问题有点旧，但是现在我背后有一个类似的解决方案，我发现了这个：

 $('#selector').bind('DOMNodeInserted', function(e) { console.log(e.target); }); 

资料来源： http ： //naspinski.net/post/Monitoring-a-DOM-Element-for-Modification-with-jQuery.aspx

希望这有帮助的人！

Answer 3

原始问题中的完成代码对我有用，谢谢！ 我只想指出我正在使用jquery 1.9.1和$ .event.handle似乎已被删除。 我更改了以下内容以使其工作。

jQuery.event.handle.call（self，{type：’contentchange’}）;

至

jQuery.event.dispatch.call（self，{type：’contentchange’}）;

Answer 4

也许你可以尝试Mutation Observer

这是代码：

 mainArea = document.querySelector("#main_area"); MutationObserver = window.MutationObserver; DocumentObserver = new MutationObserver(function() { //what you want to run }); DocumentObserverConfig = {attributes: true, childList: true, characterData: true, subtree: true}; DocumentObserver.observe(mainArea, DocumentObserverConfig);