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

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

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

解决方法

您想要进入ele的要素是什么？如果我理解您的问题，您想向正在创建的div中添加事件，而div具有id = nDiv，那么为什么要尝试使用with10ѭ获得元素？如果您尝试将事件绑定到您创建的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函数时没有括号。 , 您可以改为使用DOM创建div。这样就可以立即添加事件处理程序。例：

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

  // ...

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

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

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