jquery监听div等元素的内容变化

五迷三道 提交于 2020-03-15 23:48:27

方法一:change事件

change事件,在元素的值发生改变时触发,适用于文本域、textarea、select 。 或调用change()方法时可以监听。所以,我们可以模拟change为非表单元素监听change()事件。

 1  
 2 <!Doctype>
 3  
 4 <html>
 5  
 6 <head>
 7  
 8 <meta charset="utf-8">
 9  
10 <title>change事件</title>
11  
12 <style>
13  
14 #container {
15  
16 min-height: 120px;
17  
18 border: 1px solid #aaa;
19  
20 }
21  
22 </style>
23  
24 </head>
25  
26 <body>
27  
28 <div id="container">
29  
30  
31  
32 </div>
33  
34 <button type="button" id="btn">add "aaa" for div</button>
35  
36  
37  
38  
39  
40 <script src="jquery-1.11.3.js"></script>
41  
42 <script>
43  
44  
45  
46 function changes(){
47  
48 alert("changes");
49  
50 }
51  
52  
53  
54 $("#btn").click(function() {
55  
56 $("#container").append("aaa").change();
57  
58 });
59  
60 $("#container").bind("change", changes);
61  
62 </script>
63  
64 </body>
65  
66 </html>

以上demo中,点击按钮,为div中动态添加内容,添加内容后,手动调用change()方法,为div模拟出change事件。

 

注: 1.以上demo中是追加的内容,所以没有判断div的内容是否发生变化,如果在其他场景下,可以自己判断div内容是否发生了变化

        2 .只要兼容jquery的浏览器都可以兼容此方法。

 

方法二:DOMNodeInserted事件

经测试,这个DOMNodeInserted事件可以监听到非表单元素的内容的变化,只有在插入节点时有效,相反DOMNodeRemoved事件,只有在移除节点时有效。DOMNodeInserted事件是js提供的一个dom2级事件(具体什么意思,我还没有弄懂,弄懂后回来补充,此处省略1000字。。。),总之,是可以监听到的。

 1  
 2 <!Doctype>
 3  
 4 <html>
 5  
 6 <head>
 7  
 8 <meta charset="utf-8">
 9  
10 <title>change事件</title>
11  
12 <style>
13  
14 #container {
15  
16 min-height: 120px;
17  
18 border: 1px solid #aaa;
19  
20 }
21  
22 </style>
23  
24 </head>
25  
26 <body>
27  
28 <div id="container">
29  
30  
31  
32 </div>
33  
34 <button type="button" id="btn">add "aaa" for div</button>
35  
36  
37  
38  
39  
40 <script src="jquery-1.11.3.js"></script>
41  
42 <script>
43  
44  
45  
46 function changes(){
47  
48 alert("changes");
49  
50 }
51  
52  
53  
54 $("#btn").click(function() {
55  
56 $("#container").append("aaa");
57  
58 });
59  
60 $("#container").bind("DOMNodeInserted", changes);
61  
62 </script>
63  
64 </body>
65  
66 </html>

注: 此方法存在ie8及以下浏览器中失效

 

方法三:定时任务

可以通过定时任务来监听非表单元素的内容变化,如果以上两种方法均不适用的情况下,可以尝试此种方法

 

 1  
 2 <!Doctype>
 3  
 4 <html>
 5  
 6 <head>
 7  
 8 <meta charset="utf-8">
 9  
10 <title>change事件</title>
11  
12 <style>
13  
14 #container {
15  
16 min-height: 120px;
17  
18 border: 1px solid #aaa;
19  
20 }
21  
22 </style>
23  
24 </head>
25  
26 <body>
27  
28 <div id="container">
29  
30  
31  
32 </div>
33  
34 <button type="button" id="btn">add "aaa" for div</button>
35  
36  
37  
38  
39  
40 <script src="jquery-1.11.3.js"></script>
41  
42 <script>
43  
44  
45  
46 function changes(){
47  
48 alert("changes");
49  
50 }
51  
52  
53  
54 $("#btn").click(function() {
55  
56 $("#container").append("aaa");
57  
58 });
59  
60  
61  
62 var div = $("#container").html();
63  
64 setInterval(function() {
65  
66 var divNew = $("#container").html();
67  
68 if(div != divNew) {
69  
70 changes();
71  
72 div = divNew;
73  
74 }
75  
76 }, 100);
77  
78 </script>
79  
80 </body>
81  
82 </html>
83  

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!