jquery監聽div等元素的內容變化
阿新 • • 發佈：2018-11-06
方法一：change事件
change事件，在元素的值發生改變時觸發，適用於文字域、textarea、select 。 或呼叫change()方法時可以監聽。所以，我們可以模擬change為非表單元素監聽change()事件。
<!Doctype> <html> <head> <meta charset="utf-8"> <title>change事件</title> <style> #container { min-height: 120px; border: 1px solid #aaa; } </style> </head> <body> <div id="container"> </div> <button type="button" id="btn">add "aaa" for div</button> <script src="jquery-1.11.3.js"></script> <script> function changes(){ alert("changes"); } $("#btn").click(function() { $("#container").append("aaa").change(); }); $("#container").bind("change", changes); </script> </body> </html>
以上demo中，點選按鈕，為div中動態新增內容，新增內容後，手動呼叫change()方法，為div模擬出change事件。
注： 1.以上demo中是追加的內容，所以沒有判斷div的內容是否發生變化，如果在其他場景下，可以自己判斷div內容是否發生了變化
2 .只要相容jquery的瀏覽器都可以相容此方法。
方法二：DOMNodeInserted事件
經測試，這個DOMNodeInserted事件可以監聽到非表單元素的內容的變化，只有在插入節點時有效，相反DOMNodeRemoved事件，只有在移除節點時有效。 DOMNodeInserted事件是js提供的一個dom2級事件(具體什麼意思，我還沒有弄懂，弄懂後回來補充，此處省略1000字。。。)，總之，是可以監聽到的。
<!Doctype> <html> <head> <meta charset="utf-8"> <title>change事件</title> <style> #container { min-height: 120px; border: 1px solid #aaa; } </style> </head> <body> <div id="container"> </div> <button type="button" id="btn">add "aaa" for div</button> <script src="jquery-1.11.3.js"></script> <script> function changes(){ alert("changes"); } $("#btn").click(function() { $("#container").append("aaa"); }); $("#container").bind("DOMNodeInserted", changes); </script> </body> </html>
注： 此方法存在ie8及以下瀏覽器中失效
方法三：定時任務
可以通過定時任務來監聽非表單元素的內容變化，如果以上兩種方法均不適用的情況下，可以嘗試此種方法
<!Doctype>
<html>
<head>
<meta charset="utf-8">
<title>change事件</title>
<style>
#container {
min-height: 120px;
border: 1px solid #aaa;
}
</style>
</head>
<body>
<div id="container">
</div>
<button type="button" id="btn">add "aaa" for div</button>
<script src="jquery-1.11.3.js"></script>
<script>
function changes(){
alert("changes");
}
$("#btn").click(function() {
$("#container").append("aaa");
});
var div = $("#container").html();
setInterval(function() {
var divNew = $("#container").html();
if(div != divNew) {
changes();
div = divNew;
}
}, 100);
</script>
</body>
</html>