以下利用jquery说明：
js中，给一个dom节点绑定事件再平常不过了。这里说下，如果dom经常发生变化的话，给这个dom绑定事件的情况。
比如代码如下：
li的节点，绑定了事件：点击会打出来里头的html内容。
button点击事件：会生成一个li节点。
1 <html>
2 <head>
3 <meta charset="UTF-8">
4 </head>
5 <body>
6 <ul class="ul">
7 <li class="li">abc</li>
8 <li class="li">abc</li>
9 <li class="li">abc</li>
10 </ul>
11
12 <hr/>
13 <button id="btn">add</button>
14 </body>
15 <script type="text/javascript" src="jquery.js"></script>
16 <script type="text/javascript">
17 $(function(){
18
19 $(‘.li‘).click(function(){
20 console.log(this.innerHTML);
21 });
22
23 $(‘#btn‘).on(‘click‘, function(){
24 $(‘.ul‘).append(‘<li class="li">XXX</li>‘);
25 });
26
27 });
28
29 </script>
30 </html>
如果这么写的话，点击以后生成的li节点，点击是不会打出log的~
因为代码执行来看，未点击add时，我们给每一个li绑定了click事件，这仅限于当前dom树下的li。$(‘.li‘)仅是获取当前dom下的所有class为li的节点。
当点击button后，再生成的节点，是绑定不上的。
咋办咧？此时，我们会利用事件的冒泡或者捕获的机制，对li的父节点ul打主意~如果给ul绑定一个click事件，那么即便是点击新生成的它的子节点，不也有了事件么？哈哈~就是这样
代码如下：
$(‘.ul‘).on(‘click‘, ‘.li‘, function(){
console.log(this.innerHTML);
});
我们给.ul绑定了事件，在其中选择.li选择器，这样就解决了~
时间： 2024-10-26 05:01:25