如何將事件處理程序綁定到正在創建的元素？

在我的網頁，我要創建一些元素dymamiclly根據使用的操作，例如，當用戶點擊一個按鈕，我將創建一個新的div，但我想一個點擊處理程序添加到這個div：如何將事件處理程序綁定到正在創建的元素？

function createNewDiv(){ 
    var str="<aid='na'>xxx</a>"; 
    //add click handler to this a 
    var ele=document.getElementById("na"); 
    if(ele.attachEvent){ 
    ele.attachEvent("onclick",function(){xxxx}); 
    }else if(ele.addEventListener){ 
    ele.addEventListener("click",function(){xxx},false); 
    } 
    document.getElementById("con").innerHTML="s"; 
}

當我運行此代碼時，出現錯誤：

ele未定義。

也許這就是造成，當我使用

var ele=document.getElementById("na")

中的HTML DOM正在建設，所以它無法找到的元素。（我想這就是爲什麼我們使用jquery.ready（XXX）。

如果是這樣，是否有任何想法，使其工作？

我在我的應用程序使用原型1.4。

感謝您的所有答案。

現在使用<a>代替<div>

然而，對於somea原因，我不能使用DOM來建立我的元素，這是說，我不能用：

var div_n=document.createElement("a"); 
a.id="na"; 
......

相反，我必須使用：

var s="<a id='na'>xxx</a>"; 

//append this created link to the existed container 
document.getElementById("con").innerHTML=s; 

//then how to add the click handler to the `a#na`?

來源

2011-06-15 hguser

getElementById應該與您正在創建的div具有相同的ID嗎？評論說，你正試圖添加一個點擊處理程序到新的div但id是不同的。它是否起作用並不重要，我只是想弄清楚你想做什麼。 – 2011-06-15 13:15:23

嗨，我更新我的帖子，我想添加點擊處理程序到新創建的div。 – hguser 2011-06-15 13:17:26

感謝您更新您的信息。我回答了我的回答，我認爲這是正確的，因爲其他兩個人在我後面發佈了相同的答案;） – 2011-06-15 13:30:38

什麼元素是你想進入ele？如果我明白你的問題，你想添加一個事件到你正在創建的div，而div有id = nDiv，那麼你爲什麼試圖獲得一個元素？如果您正試圖將事件綁定到您所創建的DIV，也許你可以這樣來做：

function createNewDiv(){ 
    var div = document.createElement('div'); 
    div.id = 'nDiv'; 
    //add click handler to this div 
    div.addEventListener("click",function(){xxx},false); 
    div.innerHTML="s"; 
}

如果你有問題結合功能（我不這麼認爲），試圖定義你的函數和綁定它的點擊這樣：

function foo(){xxx} 
... 
div.addEventListener("click",foo,false); 
...

注意，有約束力的foo功能時，沒有括號。

來源

2011-06-15 13:21:56 Vithozor

您可以使用DOM創建div來代替。這將使其立即可用於添加事件處理程序。例如：

function createNewDiv(){ 
    var ele = document.createElement("div"); 
    div.setAttribute("id","nDiv"); 

    // ... 

    document.getElementById("con").appendChild(ele); 
}

旁註：

這樣做可以使用DOM也更快，更標準的投訴比innerHTML的。但是人們傾向於使用innerHTML，因爲它更容易。

來源

2011-06-15 13:21:12

var str="<div id="nDiv">xxx</div>"

在進一步研究之前，問題的這一部分是什麼？我不確定它是幹什麼的，但除非你避免使用內部引號，否則它是無效的。

無論如何，我不知道到底是什麼你的代碼是幹什麼的，但你想要做的應該是這個樣子的：

// Get a container element for wherever you're going to add these divs 
var container = document.getElementById("con"); 

function createDiv() { 
    var div = document.createElement("div"); 
    // assign properties to div 
    div.onclick = someFunction; 
    container.appendChild(div); 
}

jsFiddle example

來源

2011-06-15 13:21:50 brymck

如何將事件處理程序綁定到正在創建的元素？

回答

相關問題