将onclick事件添加到仅处理最后一个元素的新html元素

Question

问题在于，当我在页面底部创建页码按钮时，onclick只能与最后创建的元素一起使用。

以下是页面按钮的样子：

    for(var i = 0; i < numberOfPages; i++) {
        if(Math.floor((((startIndex + 1) / 10) + 1)) == (i + 1)) {
            var newElement = document.createElement("u");
            document.getElementById("imagesNav").appendChild(newElement);
            newElement.id = "imagesNavU";
            var newElement = document.createElement("a");
            document.getElementById("imagesNavU").appendChild(newElement);
            var str = "page" + (i + 1);
            newElement.innerHTML = i + 1;
            newElement.onclick=function(){currentPageNumber(str);};
        } else {
            var newElement = document.createElement("a");
            document.getElementById("imagesNav").appendChild(newElement);
            var str = "page" + (i + 1);
            newElement.innerHTML = i + 1;
            newElement.onclick=function(){currentPageNumber(str);};         
        }
        if(i + 1 != numberOfPages) {
            document.getElementById("imagesNav").innerHTML += "&nbsp;&nbsp;";
        }
    }
}

如果该元素是当前页面，则第一个if语句只是将下划线标记放在上面。

编辑：问题已经解决。感谢大家的帮助！

Answer 1

问题在于循环的这一部分：

    if(i + 1 != numberOfPages) {
        document.getElementById("imagesNav").innerHTML += "  ";
    }

这是重新解析imagesNav元素中的所有HTML。这会创建新的<a>元素，这些元素不具有先前的onclick绑定。

相反，您可以追加包含空格的<span>元素。

＆＃13;

＆＃13;

var numberOfPages = 3;
var startIndex = 0;

for (var i = 0; i < numberOfPages; i++) {
  if (Math.floor((((startIndex + 1) / 10) + 1)) == (i + 1)) {
    var newElement = document.createElement("u");
    document.getElementById("imagesNav").appendChild(newElement);
    newElement.id = "imagesNavU";
    var newElement = document.createElement("a");
    document.getElementById("imagesNavU").appendChild(newElement);
    var str = "page" + (i + 1);
    newElement.innerHTML = i + 1;
    newElement.onclick = function() {
      currentPageNumber(str);
    };
  } else {
    var newElement = document.createElement("a");
    document.getElementById("imagesNav").appendChild(newElement);
    var str = "page" + (i + 1);
    newElement.innerHTML = i + 1;
    newElement.onclick = function() {
      currentPageNumber(str);
    };
  }
  if (i + 1 != numberOfPages) {
    var span = document.createElement('span');
    span.innerHTML = '&nbsp;&nbsp;';
    document.getElementById("imagesNav").appendChild(span);
  }
}

function currentPageNumber(str) {
  alert(str);
}

＆＃13;

<div id="imagesNav">

</div>

＆＃13;

＆＃13;

＆＃13;

另一种方法是使用insertAdjacentHTML，它将HTML添加到元素中，而无需重新解析其中已有的内容。

    document.getElementById("imagesNav").insertAdjacentHTML('beforeend', '  ');

您还应该看到JavaScript closure inside loops – simple practical example，因为您使用str变量的方式，所有点击处理程序都将使用循环最后一次迭代的值。