DOM变化后事件绑定失效 · 致力于web前端技术撰写

前端经常要处理一些点击事件，或者是在用户保存时，做一些检查，这时，我们常常会绑定一些事件，如 click，change等。当然这都是我们经常使用的功能。有些时候，我们的页面可能还会涉及到一些改变，譬如在点击某个按钮时，在页面中插入一些新的内容，如果此前我们对这个内容绑定过事件，那么新插入的内容会不会绑定事件呢？很可惜，是没有，因为我们通常都是在页面加载OK之后就绑定事件，而此时，这部分新内容还未插入到页面。如下： ~~~ <!doctype html> <html lang="en"> <head>  <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="Keywords" content="关键词一，关键词二"> <meta name="Description" content="网站描述内容"> <meta name="Author" content="Yvette Lau"> <meta name = "viewport" content = " width = device-width, initial-scale = 1 "> <title>CSSDemo</title>   </head> <body> <div id = "content"> <input type="file" /> </div> <div> <input type="button" value="点我"> </div> </body> <script type="text/javascript" src="jquery-1.11.2.min.js"></script> </html> ~~~ 当前的页面中除了一个file控件，还有一个button按钮。下面是JS的内容，在JS中我们为file控件绑定了change事件，在点击button按钮时，我们会往页面中插入一个file控件。 ~~~ <script type="text/javascript"> $(function(){ $('input[type ="file"]').change(function(){ console.log($(this).val() ) if($(this).val() == ""){ alert("你好") } }) $('input[type ="button"]').click(function(){ $("#content").append('<input type="file"/>') }) }) </script> ~~~ 通过测试，可以发现，第一个file在change时，是能够触发事件的，而第二插入的file则没有change事件。对于这个问题，有如下两种解决方法：第一种是将绑定change事件封装成一个函数，在点击button按钮插入file控件之后，调用这个函数。如下： ~~~ <script type="text/javascript"> $(function(){ function fileChange(){ $('input[type ="file"]').change(function(){ console.log($(this).val()) if($(this).val() == ""){ alert("你好") } }) } fileChange(); $('input[type ="button"]').click(function(){ $("#content").append('<input type="file"/>'); fileChange(); }) }) </script> ~~~ 另一种方式，是在DOM加载之后和DOM内容发生改变时，绑定file控件的change事件，如下： ~~~ <script type="text/javascript"> window.onload,window.onchange = function(){ $('input[type ="file"]').change(function(){ console.log($(this).val() ) if($(this).val() == ""){ alert("你好") } }) } $('input[type ="button"]').click(function(){ $("#content").append('<input type="file"/>') }) </script> ~~~ 两种方式均能解决此问题，至于究竟使用何种方式，就看个人的喜好。