將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>元素。

 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添加到元素中，而無需重新解析其中已經存在的內容。

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

您還應該在循環內看到JavaScript閉包–簡單的實際示例，因為使用str變量的方式，所有單擊處理程序都將使用循環的上一次迭代中的值。