Click sur une classe fonctionne 'parfois'

Bonjour

J'utilise ce code qui au clic sur une div de class 'tip' affiche le data-id cliqué.

Code:

1
2
3
4
5
6
7
8
9
10
window.onload = function() {
    list = document.getElementsByClassName("tip");
    for (var i = 0; i < list.length; i++) {
        list[i].addEventListener("click", function(e) {
            id = this.getAttribute('data-id')
            alert(id);
            e.preventDefault();
        });
    }
};

J affiche donc une liste de 8 items chacun ayant une class 'tip' et un data-id et cela fonctionne parfaitement.
J ai un bouton qui au click permet d afficher les 8 items suivants avec le même script php qui m a permis d afficher les 8 premiers + les 8 autres etc et là, ce code ci dessus ne fonctionne plus du tout, c est à dire même pas là ou il fonctionnait initialement.
J'ai essayé avec le code suivant mais même problème :

Code:

1
2
3
4
5
6
7
8
9
10
var classname = document.getElementsByClassName("tip");
 
var myFunction = function() {
    var attribute = this.getAttribute("data-id");
    alert(attribute);
};
 
for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('click', myFunction, false);
}

à toutes fin utiles, et sans vraiment penser que ce soit bien utile, je mets le code de mon bouton

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function SearchCourse() {
    document.getElementById("bt_plus").disabled = true;
    var maxi = document.getElementById("max_page").value;
    var no_page = document.getElementById("no_page").value;
    no_page++;
    document.getElementById("no_page").value = no_page;
    var url = 'includes/courses.php?quoi=' + document.getElementById("quoi").value + '&matiere=' + document.getElementById("matiere").value + '&langue=' + document.getElementById("langue").value + '&no_page=' + no_page + '&maxi=' + maxi;
    var xhttp;
    xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("result_show").innerHTML = document.getElementById("result_show").innerHTML + xhttp.responseText;
            if ((no_page + 1) * 8 < maxi) {
                document.getElementById("bt_plus").disabled = false;
                var compteur = (no_page + 1) * 8;
                if (compteur > maxi) {
                    compteur = maxi;
                }
                document.getElementById("compteur").innerHTML = compteur;
            } else {
                document.getElementById("bt_plus").style.display = "none";
                document.getElementById('bt_fini').style.display = "block";
            }
        }
    };
    xhttp.open("GET", url, true);
    xhttp.send();
}

J ai besoin de vos explications s il vous plait
merci pour votre aide