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> ~~~ 兩種方式均能解決此問題，至于究竟使用何種方式，就看個人的喜好。