方法一:change事件
change事件,在元素的值发生改变时触发,适用于文本域、textarea、select 。 或调用change()方法时可以监听。所以,我们可以模拟change为非表单元素监听change()事件。
<!Doctype>
<meta charset="utf-8">
<title>change事件</title>
<style>
#container {
min-height: 120px;
border: 1px solid #aaa;
</style>
</head>
<div id="container">
<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>
<meta charset="utf-8">
<title>change事件</title>
<style>
#container {
min-height: 120px;
border: 1px solid #aaa;
</style>
</head>
<div id="container">
<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>
<meta charset="utf-8">
<title>change事件</title>
<style>
#container {
min-height: 120px;
border: 1px solid #aaa;
</style>
</head>
<div id="container">
<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>
1 .DOMNodeInserted 是对节点的插入后执行事件。
$('
div
').bind('DOMNodeInserted',function(){
alert('插入了节点')
可以选取 class,id,
元素
。
2. DOMNodeRemoved 是对去掉节点后执行事件。
$('
div
').bind('DOMNodeRemoved',functio...
我们通常会用onchange事件来完成
元素
值发生改变触发的
监听
。
但是 onchange 比较适用于<input>、<textarea> 以及 <select>
元素
,对于
div
,span等
元素
就不能使用了。
例如,
监听
span的
元素
值
变化
可以用DOMNodeInserted,经测试可用
$("#state_val").bind("DOMNodeInse...