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

how to binding a event handler to a element being created?

本文关键字：创建 元素 绑定 事件处理 程序      更新时间：2023-09-26

在我的页面中，我必须根据用户的操作动态创建一些元素，例如，当用户单击按钮时，我会创建一个新的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，那么为什么要尝试使用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";
}

如果您在绑定函数时遇到问题（我不这么认为），请尝试定义您的函数并以这种方式将其绑定到点击：

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 );
}

旁注：

使用DOM也比innerHTML更快、更符合标准。但人们倾向于使用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示例

相关文章：