outerHTML et eventListener

Question

J'ai un code simple :

document.getElementById("number").addEventListener('click', test);
var i = 1;
function test(event) {
    document.getElementById("number").outerHTML = '<span id="number">' + (i++) + '</span>';
}

<span id="number">0</span>

Mais cela ne fonctionne qu'au premier clic. L'eventListener suivant ne fonctionne pas. Quelle est la meilleure façon de le faire fonctionner ?

Answer 1

Vous pouvez essayer d'utiliser innerHTML au lieu de outerHTML (ce dernier recrée votre élément ; l'écouteur d'événement n'est plus ajouté). 0

<script>
    document.getElementById("number").addEventListener('click', test);
    var i = 1;
    function test(event) {
        document.getElementById("number").innerHTML = i++;
    }
</script>

Sinon, vous pouvez réinitialiser l'écouteur d'événement de cette façon, tout en utilisant outerHTML

<span id="number">0</span>

<script>
    document.getElementById("number").addEventListener('click', test);
    var i = 1;
    function test(event) {
        document.getElementById("number").outerHTML = '<span id="number">' + (i++) + '</span>';
        document.getElementById("number").addEventListener('click', test);

    }
</script>

Answer 2

document.getElementById("number").addEventListener('click', test);
var i = 1;
function test(event) {
    this.innerHTML = i++;
}

<span id="number">0</span>

Ne pas utiliser outerHTML il renvoie le contenu DOM et vous créez un autre span à la place, donc l'eventlistener ne fonctionne pas, pour remplacer le contenu interne utilisez innerHTML .

Answer 3

Je pense que vous voulez quelque chose comme ça.

    document.getElementById("number").addEventListener('click', test);
    function test(event) {
        var obj = document.getElementById("number");
        console.log(obj.innerHTML);
        var i = parseInt(obj.innerHTML);
        obj.innerHTML = ++i;
    }

<span id="number">0</span>

Pas besoin d'utiliser outerHTML sinon vous devez ajouter l'écoute à chaque clic

Answer 4

Vous remplacez l'élément entier pour qu'il soit nouveau. L'événement se trouvait sur l'ancien élément "nombre" et l'événement ne se lie pas à nouveau. Cela n'a aucun sens de remplacer l'élément entier lorsque vous ne faites que mettre à jour le texte. Utilisez soit innerHTML, soit textContent.

function test(event) {
    document.getElementById("number").innerHTML = i++;
}

Answer 5

Vous remplacez le html de l'élément "nombre" à l'intérieur du clic menant à la suppression de l'écouteur : Ce qui suit devrait fonctionner :

  <script>
        document.getElementById("number").addEventListener('click', test);
        var i = 1;
        function test(event) {
            document.getElementById("number").outerHTML = '<span id="number">' + (i++) + '</span>';
            document.getElementById("number").addEventListener('click', test);
        }
    </script>