如何将事件处理程序绑定到正在创建的元素？

在我的网页，我要创建一些元素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

如何将事件处理程序绑定到正在创建的元素？

回答

相关问题