Hinzufügen eines onclick-Ereignisses zu einem neuen html-Element, das nur für das letzte Element funktioniert

Question

Das Problem ist, dass wenn ich Seitennummerntasten am unteren Rand der Seite erstelle, der onclick immer nur mit dem letzten erstellten Element funktioniert.

Hier ist, was die Seite Tasten wie folgt aussehen:

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

Die erste if-Anweisung legt einfach unterstrichenen Tags auf, wenn dieses Element die aktuelle Seite.

Edit: Das Problem wurde gelöst. Danke an alle für ihre Hilfe!

Answer 1

Das Problem ist mit diesem Teil der Schleife:

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

Dies wird erneut Parsen alle die HTML im imagesNav Elemente. Dies erzeugt neue <a> Elemente, die nicht die onclick Bindungen haben, die die vorherigen hatten.

Stattdessen können Sie ein <span> Element anhängen, das die Leerzeichen enthält.

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>

Ein anderer Weg, es zu tun ist, mit insertAdjacentHTML, die ohne erneute Parsing HTML zu einem Element hinzufügt, was in ihm schon ist.

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

Sie sollten auch JavaScript closure inside loops – simple practical example sehen, weil die Art und Weise Sie die str Variable verwenden, alle Klick-Handler den Wert aus der letzten Iteration der Schleife verwenden.