jQuery手表div
有什么方法可以观看，如果div内的内容改变？
假设我有：
<div id="hello"><p>Some content here</p></div> 在5秒后的某个时间点更改为：
<div id="hello"><ul><li>This is totally different!</li></ul></div>
我怎么能通过callback或其他的东西被通知这个？ 我可以在大多数情况下得到正在做插入的JavaScript，告诉我。 但是我想知道这是否可能。
jQuery .change（）方法仅适用于表单字段。
我为你写了一个小小的jQuery插件：
<!-- jQuery is required --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <!-- this is the plugin --> <script> jQuery.fn.contentChange = function(callback){ var elms = jQuery(this); elms.each( function(i){ var elm = jQuery(this); elm.data("lastContents", elm.html()); window.watchContentChange = window.watchContentChange ? window.watchContentChange : []; window.watchContentChange.push({"element": elm, "callback": callback}); } ) return elms; } setInterval(function(){ if(window.watchContentChange){ for( i in window.watchContentChange){ if(window.watchContentChange[i].element.data("lastContents") != window.watchContentChange[i].element.html()){ window.watchContentChange[i].callback.apply(window.watchContentChange[i].element); window.watchContentChange[i].element.data("lastContents", window.watchContentChange[i].element.html()) }; } } },500); </script> <!-- some divs to test it with --> <p>Testing it: (click on divs to change contents)</p> <div id="a" onclick="$(this).append('i')">Hi</div> <div id="b" onclick="$(this).append('o')">Ho</div> <div class="c" onclick="$(this).append('y')">He</div> <div class="c" onclick="$(this).append('w')">He</div> <div class="c" onclick="$(this).append('a')">He</div> <!-- this is how to actually use it --> <script> function showChange(){ var element = $(this); alert("it was '"+element.data("lastContents")+"' and now its '"+element.html()+"'"); } $('#a').contentChange(function(){ alert("Hi!") }); $('div#b').contentChange( showChange ); $('.c').contentChange(function(){ alert("He he he...") }); </script>
请注意，这只监视元素（html）内容的变化，而不是属性。
没有原生的jQuery / DOM事件，当HTML / DOM内容发生变化时将触发。
你可以（如果你觉得特别浪费）做这样的事情：
$(function() { var $div = $("#hello"); var html = $div.html(); var checking = setInterval(function() { var newhtml = $div.html(); if (html != newhtml) { myCallback(); html = newhtml; } },100); function myCallback() { alert('content changed!'); // if you only want it to fire once, uncomment the following: // clearInterval(checking); } });
请记住，每100毫秒调用一次.html()可能不是您网站性能的最佳主意。
jsFiddle样机
也许，监视修改图层内容的事件的来源是合理的吗？ 比方说，用户点击了任何地方（阅读，“点击”）后，内容可能已经改变。 因此，如果您点击后检查.html（）而不是使用循环，则可能会节省一些系统资源。
谁/什么会改变这个？ 如果这是你控制的一些JS，那就用它来触发你的callback。 显然用户不能改变这一点。
如果你想看一个<input>元素等，使用“更改”事件。 这里的jQuery版本： http : //api.jquery.com/change/
这里有一个代码示例，当给定的值发生变化时调用一个简单的警报：
<!DOCTYPE html> <html lang="en"> <head> <title>watchu, watchu, watchu want, watchu want?</title> </head> <body> <div id='foo'>Hello World!</div> <p><input type="button" id="ChangeButton" value="Change It" /></p> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(function () { $('#ChangeButton').click(function () { $('#foo').html('Awfveeterzain!'); }); window.watchForChangeOriginalValue = $('#foo').html(); watchForChange(); }); function watchForChange() { if ($('#foo').html() != window.watchForChangeOriginalValue) alert('the value changed!'); else window.setTimeout(watchForChange, 500); } </script> </body> </html>
有一些事件叫做DOMNodeInserted ， DOMNodeRemoved和DOMSubtreeModified 。 哪个检查是否有任何元素被添加或删除，或任何内部的Html内部更改。 为此，你需要一个setInterval()函数。
function DivChange() { $('#YourDiv').bind('DOMNodeInserted DOMNodeRemoved', function (event) { if (event.type == 'DOMNodeInserted') { alert('Content added'); } else if (event.type == 'DOMNodeRemoved') { alert('Content removed'); } else { alert('Inner Html changed for some content'); } }); } var DivTimer = setInterval(DivChange, 1000);
上面的函数会检查Div是否每次更改内容
注意：这个事件不被IE支持
