如果div中的内容发生变化，有什么方法可以观察吗？
假设我有：
<div id="hello"><p>Some content here</p></div>
在 5 秒后的某个时间点变为：
<div id="hello"><ul><li>This is totally different!</li></ul></div>
如何通过回调或其他方式通知我？在大多数情况下，我可以得到正在插入的 javascript，告诉我。但我想知道这是否可能。
【问题讨论】：
标签： jquery
谁/什么会改变这一点？如果是你控制的一些 JS，用它来触发你的回调。显然用户无法更改这一点。
如果您想观看 <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>
【讨论】：
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) 内容的变化，而不是属性。
【讨论】：
changethings()），您可以像这样扩展它：（在伪代码中）var funcThatChangesThings = changethings; changethings = function(...args...){ funcThatChangesThings(...args...); notifyChanges(); } 假设 notifyChanges() 是您的回调.新函数应该具有与实际函数相同的签名（参数）。
当 HTML/DOM 内容更改时，不会触发本机 jQuery/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() 可能并不是提高网站性能的最佳选择。
【讨论】：
也许，监控修改图层内容的事件源是否合理？比如说，在内容可能发生变化之后，用户点击了任何地方（读作“点击了”）。因此，如果您在单击后检查 .html() 而不是使用循环 - 它可能会节省一些系统资源。
【讨论】：
有一些事件称为DOMNodeInserted、DOMNodeRemoved 和DOMSubtreeModified。哪个检查是否在 div 内添加或删除了任何元素或更改了任何内部 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 不支持此事件
【讨论】：