最近需求中遇到一个问题：
用jquery给dom元素绑定事件后，又操作了dom，这个时候事件绑定就会失效
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <script src="jquery.min.js"></script> <script> $(document).ready(function () { $(".back").click(() => { console.log("back"); }); $(".share").click(() => { console.log("share"); }); $('#parent').before('#test-box')//操作dom }); </script></head><body> <div id="test-box"> <div class="back">返回</div> <div class="share">分享</div> </div></body></html>
通过一番测试，发现不操作dom的时候，事件绑定是正常可以的，一旦操作dom后就会失效。
网上查阅资料后，发现虽然操作dom前后节点名称参数都是一模一样的，但是操作dom后已经不是同一个DOM对象了，所以绑定的事件会失效。
可以使用on委托代理的方式进行事件绑定：
$("#parent").on('click','.back',() => { console.log("back");})
注意：委托代理需要通过dom操作前后同样的父级进行代理，父元素一开始就存在，通过父元素进行代理
委托的原理：一开始给btn绑定的事件会冒泡到父元素。父元素也绑定了click事件，此后就会触发父元素的点击事件
