Javascript OnClick仅适用于最后附加的子项

我有这样的代码：

var pageCount = 5; //for example, doesn't really matter
var paginationList = document.createElement("ul");
paginationList.className = "pagination";
for(var i = 1; i <= pageCount; i++){
  var paginationNode = document.createElement("li");
  var paginationLink = document.createElement("a");
  paginationLink.innerHTML = i;
  paginationLink.href = "#";
  paginationLink.onclick = function(){ console.log("yay"); }; //removed loadProperties here
  paginationNode.appendChild(paginationLink);
  paginationList.appendChild(paginationNode);
}
divxml.innerHTML = "";
divxml.appendChild(paginationList);
//code replaced by this comment inserts a lot of content to divxml
//for this bug or something to work, you need next line
divxml.innerHTML += "<br>";
divxml.appendChild(paginationList);

var pageCount=5//例如，这并不重要
var paginationList=document.createElement（“ul”）；
paginationList.className=“分页”；
对于（var i=1；i
divxml.innerHTML+=“
”；

从
innerHTML
读取将DOM转换为HTML。HTML没有附加到DOM的事件处理程序

将HTML写回
innerHTML
（在附加

后）将HTML转换为DOM并覆盖以前的DOM

现在您已经销毁了事件处理程序

不要使用
innerHTML
您必须创建两个列表元素和两组列表项元素才能使用：

var pageCount = 5; //for example, doesn't really matter
var paginationList1 = document.createElement("ul");
var paginationList2 = document.createElement("ul");
paginationList1.className = paginationList2.className = "pagination";

for(var i = 1; i <= pageCount; i++){
  paginationList1.appendChild(createPaginationLink(i));
  paginationList2.appendChild(createPaginationLink(i));
}

document.body.appendChild(paginationList1);
document.body.appendChild(document.createElement("br"));
document.body.appendChild(paginationList2);

function createPaginationLink(text) {
  var paginationNode = document.createElement("li");
  var paginationLink = document.createElement("a");
  paginationLink.innerText = text;
  paginationLink.href = "#";
  paginationLink.addEventListener("click", function(){ console.log("yay"); }); //removed loadProperties here
  paginationNode.appendChild(paginationLink);
  return paginationNode;
}

var pageCount=5；//例如，这并不重要
var paginationList1=document.createElement（“ul”）；
var paginationList2=document.createElement（“ul”）；
paginationList1.className=paginationList2.className=“pagination”；
对于（var i=1；i单击事件必须在添加到DOM后实例化。您使用jQuery吗？这只是典型的闭包循环问题。您在循环中定义了onclick函数，因此它只适用于循环中的最后一个元素，其中定义了
xhttp
和
pageSize
？我相信没有self-contained示例我们无能为力。请参阅。@Pabs123:这不正确（一般）。循环中的函数只有在函数访问循环变量时才有问题。当前版本的代码不是这样。@HappyCarts如果在将其添加到DOM后必须对其进行实例化，为什么第二个按钮会起作用？那么如何添加新行？与添加列表元素的方法相同。
createElement
和
appendChild
（虽然换行符在这里没有真正意义，但CSS边距更合适）.但是如果我像这样添加新行，那么第二组分页按钮就不会出现，如何添加它们？一个元素不能同时存在于DOM的多个部分中。如果您
appendChild
在多个位置移动相同的内容，那么您可以移动它。如果您需要两组元素，那么创建两组元素。是否有方法复制节点e、 或者我需要为
添加另一个
？
var pageCount = 5; //for example, doesn't really matter
var paginationList1 = document.createElement("ul");
var paginationList2 = document.createElement("ul");
paginationList1.className = paginationList2.className = "pagination";

for(var i = 1; i <= pageCount; i++){
  paginationList1.appendChild(createPaginationLink(i));
  paginationList2.appendChild(createPaginationLink(i));
}

document.body.appendChild(paginationList1);
document.body.appendChild(document.createElement("br"));
document.body.appendChild(paginationList2);

function createPaginationLink(text) {
  var paginationNode = document.createElement("li");
  var paginationLink = document.createElement("a");
  paginationLink.innerText = text;
  paginationLink.href = "#";
  paginationLink.addEventListener("click", function(){ console.log("yay"); }); //removed loadProperties here
  paginationNode.appendChild(paginationLink);
  return paginationNode;
}