随笔一个dom节点绑定事件
Posted 根号5减1除以2
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了随笔一个dom节点绑定事件相关的知识，希望对你有一定的参考价值。
以下利用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选择器，这样就解决了~
以上是关于随笔一个dom节点绑定事件的主要内容，如果未能解决你的问题，请参考以下文章
通过js添加的DOM节点的click事件绑定不上的解决方案以及IOS下click事件委派失效的解决方案