Question

在我的页面中，我必须根据用户的操作创建一些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）的原因。

如果是的话，有什么想法让它发挥作用吗？

我在我的应用程序中使用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 example

Answer 3

您想进入ele的哪个元素？如果我了解您的问题，您希望向正在创建的div添加一个事件，而div包含id = nDiv，那么您为什么要尝试使用{{{{}} 1}？如果你试图将事件绑定到你创建的div，也许你可以这样做：

id = con

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

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); ...函数时没有括号。

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

3 个答案: