jQuery: Element konnte nicht gefunden werden

Question

Ich habe eine Tabelle mit AJAX erstellt, um den Inhalt der Tabelle zu erhalten. Um durch seine Seiten zu navigieren, habe ich die Seitenumbruchkomponente des Bootstrap verwendet. Die Paginierung wird ebenfalls mit JS gebaut und die Elemente werden in dieser Schleife eingefügt:

for (i = 1; i <= pageCount; i++) { 
    var li = $("<li>"); 
    li.append($("<a>").attr("href", "#").data("page", i).html(i)); 
    li.appendTo("ul.pagination"); 
} // end for (i = 1; i <= pageCount; i++) 

Wenn der Benutzer zu einer anderen Seite navigiert das aktive Element sollte mit dem entsprechenden umgeschaltet werden.

$("ul.pagination li.active").removeClass("active"); // works fine 

Leider $(this) in dem 'Klick' Handler ist keine Option, da ich dies auch an anderer Stelle benötigen.
So verändern ich die Lösung, die ich hier gefunden: https://stackoverflow.com/a/4191718/6087532
Das hat bei mir nicht funktioniert (ich versuchte, ein paar Variationen):

$('ul.pagination li a[data-page="' + page + '"]').parent().addClass("active"); 

Als ich versuchte, das resultierende Element (e) in der Konsole zu überprüfen Ich habe immer keine Ergebnisse bekommen.

fand ich eine Abhilfe mit .each:

$('ul.pagination li a').each(function(index, element) { 
    if ($(this).data("page") == page) { 
    $(this).parent().addClass("active"); 
    } 
}); 

Aber das nervt mich ernsthaft, weil a) diese Lösung nicht sehr elegant und wahrscheinlich langsamer und b) ich kann nicht herausfinden, was ich tat falsch ist.

Answer 1

jQuery .data() und HTML-Attribut data-*** ist nicht das Gleiche.

Also, wenn Sie diese verwenden:

$('ul.pagination li a[data-page="' + page + '"]').parent().addClass("active"); 

Sie haben Ihre Schleife, dies zu ändern:

for (i = 1; i <= pageCount; i++) { 
    var li = $("<li>"); 
    li.append($("<a>").attr("href", "#").attr("data-page", i).html(i)); 
    li.appendTo("ul.pagination"); 
} // end for (i = 1; i <= pageCount; i++)