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

Question

在我的页面中，我必须根据使用的操作动态创建一些元素，例如，当用户单击按钮时，我将创建一个新的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）的原因。

如果是这样，是否有任何使它起作用的想法？

我在应用程序中使用Prototype 1.4。

---

感谢所有的答案。

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

但是由于某种原因，我不能使用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`?

Answer 1

您可以改为使用DOM创建div。 这样就可以立即添加事件处理程序。 例：

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

  // ...

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

边注：

使用DOM进行此操作也比innerHTML快得多，并且对标准的抱怨也更多。 但是人们倾向于使用innerHTML，因为它更容易。

Answer 2

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示例

Answer 3

您想加入ele什么要素？ 如果我理解您的问题，您想向正在创建的div添加一个事件，并且该div的id = nDiv ，那么为什么要尝试获取id = con的元素呢？ 如果您尝试将事件绑定到您创建的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";
}

如果您在绑定函数时遇到问题（我不这么认为），请尝试定义函数并将其绑定到click，方法是：

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

请注意，绑定foo函数时没有括号。