在通過ajax創建的頁面元素上運行javascript

Question

我正在使用Javascript對頁面顯示方式進行一些更改，具體取決於用戶在表單中輸入的內容。除了在一個元素上，這工作得很好，很花哨。那是因爲這個元素是通過ajax改變的，這取決於用戶在表單中選擇的內容。

我使用document.observe('dom:loaded', function() {運行我的JS代碼，所以很明顯，這一個元素JS沒有工作，因爲在加載dom後添加了元素。加載後在此頁面元素上運行JS的最佳方式是什麼？

謝謝！

Answer 1

您可以處理父元素上的事件，然後當事件觸發時使用event object的target property找出觸發事件的哪個子元素，例如如果您想知道何時動態添加按鈕是單擊了，你可以這樣做：

document.getElementById("parent").click = function(event){ 
    if(event.target.id=="myButton"){ 
     //handle click 
    } 
} 

<div id="parent"> 
    <input type="button" id="myButton" /> <!-- added dinamycally --> 
</div> 

這是利用的Event bubbling