将onclick事件添加到仅在最后一个元素上起作用的新html元素 [英] Adding an onclick event to a new html element only working on the last element

问题描述

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

The problem is that when I create page number buttons at the bottom of the page the onclick only ever works with the last element created.

这是页面按钮的外观:

    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语句只是在其下添加下划线标签.

The first if statement just puts underline tags on if that element is the current page.

问题已解决.谢谢大家的帮助！

The problem has been solved. Thank you to everyone for their help!

推荐答案

问题出在这部分循环中:

The problem is with this part of the loop:

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

这将重新解析 imagesNav 元素中的所有HTML.这样会创建新的< a> 元素，这些元素没有以前的 onclick 绑定.

This is re-parsing all the HTML in the imagesNav element. This creates new <a> elements, which don't have the onclick bindings that the previous ones had.

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

Instead, you can append a <span> element containing the spaces.

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

<div id="imagesNav">

</div>

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

Another way to do it is with insertAdjacentHTML, which adds HTML to an element without re-parsing what's already in it.

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

您还应该看到循环内的JavaScript封闭-简单实用例如，因为您使用 str 变量的方式，所有单击处理程序都将使用循环最后一次迭代中的值.

You should also see JavaScript closure inside loops – simple practical example because the way you're using the str variable, all the click handlers will use the value from the last iteration of the loop.

这篇关于将onclick事件添加到仅在最后一个元素上起作用的新html元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！