javascript - outerHTML 和 eventListener

Question

我有简单的代码:

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>

但这仅适用于首次点击。下一个 eventListener 不工作。使其发挥作用的最佳方式是什么？

Answer 1

您可以尝试使用 innerHTML 而不是 outerHTML(后者会重新创建您的元素；不再添加事件监听器) 0

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

否则，您可以通过这种方式重置事件监听器，同时仍然使用 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>