Javascript AddEventListener問題

Question

我有兩個選擇框，每個選擇框都在具有特定id的span元素中。第一個選擇框是國家，另一個是城市名單。當我選擇一個國家時，城市選擇框容器跨度的innerHtml被ajax函數的響應代替，一切都很好。但是我想通過使用selectbox的onchange屬性來啓動一個函數，如果在頁面加載的時候addeventListener函數工作正常但是替換innerHtml的替換它不起作用，並且替換之後替換後的城市selecbox的id是一樣的。我只是在使用。

document.getElementById('to_city').addEventListener('change',doSomething,false); 

該代碼由窗口元素的onload初始化。

它工作沒有ajax替換，但沒有後。

Answer 1

當您用AJAX替換內容時，您需要再次綁定事件。所以更換內容後重新綁定事件是個好主意。

有一種方法可以避免使用事件冒泡。

JQuery 1.4+支持onchange事件傳播，因此您可以使用jquery委託函數來實現相同的功能。 http://api.jquery.com/delegate/

用jquery只有一行做這項工作。

$("#container").delegate("#to_city", "change", doSomething); // Workd in all browsers 

我在下面的示例中忽略了IE，因爲您使用IE不支持的addEventListener。 沒有Jquery的 工作實施例（不工作在IE）：http://codebins.com/bin/4ldqpb1/2

document.getElementById("container").addEventListener('change', function(e) { 
    var targ=e.target; 
    if (targ.id == "to_city") { //you just want to capture to_city event 
     //DO STUFF FOR SELECT 
     //DO STUFF 
     doSomething(); 
     alert("id: " + targ.id + "\nvalue: " + targ.value); 
    } 

}, false) 

說明：

如果綁定它們綁定到該特定元件不選擇或ID的任何事件。所以當你用具有相同ID的新元素替換內容和新替換元素時，新元素沒有附加任何事件。所以你需要再次舉辦活動。所以如果你在AJAX內容替換之後附加事件doSomething將會起作用。但這不是一個很好的解決方案。

我們正在使用事件冒泡概念。許多事件冒泡到文檔的頂部。 （IE不會冒泡改變事件） 因此，我們在容器上編寫處理程序並監聽事件。每個事件都有一個目標或srcElement，它表示哪個dom元素觸發此事件。如果dom元素是我們正在尋找的執行功能。在這可以我們正在尋找ID to_city的元素，這就是爲什麼如果條件。