Question

我的代码很简单：

＆＃13;

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

＆＃13;

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

＆＃13;

但这只是首次点击。下一个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>

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

不要使用outerHTML，它会返回该DOM内容，而您正在创建另一个span，因此eventlistener无效，要使用innerHTML替换内部内容。

Answer 3

我想你想要这样的东西。

    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>

无需使用outerHTML，否则您需要在每次点击中添加听力

Answer 4

您替换整个元素，使其成为新元素。事件发生在旧的“数字”元素上，事件不重新绑定。在更新文本时替换整个元素是没有意义的。使用innerHTML或textContent

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

Answer 5

您正在覆盖点击内部元素“number”的html，导致再次删除侦听器：以下应该有效：

  <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>

outerHTML和eventListener

5 个答案: