当我向 div.innerHTML 添加内容时，事件侦听器不起作用

这是我的代码:

<html>
<head>
    <script type="text/javascript" language="javascript">
        function load() {
            div1 = document.getElementById('div1');
            div2 = document.getElementById('div2');
            function clicky() {
                alert('1');
            }
            div2.addEventListener('click', clicky);
            //div1.innerHTML += 'ooooooofdsfdsfdsfdsfdsfsdfdsfdsfdsfdsklfdsjfkldsjfkldsjfldsjfkldsjfkldsjfdskl';
        }       
    </script>
</head>
<body onload="load();">
    <div id="div1" style="width : 300px; height : 300px; background-color : red; position : absolute">
        <div id="div2" style="width : 20px; height : 20px; background-color : green; position : absolute; right : 5px; top : 5px;">X</div>
    </div>
</body>

在div1中有div2。如果注释的字符串真的被注释了，一切都可以工作:单击div2会引起警告。但是如果我把史密斯加到div1上。innerHTML，事件处理程序不工作。问题在哪里?

你的代码

div1.innerHTML += 'ooooooofdsfdsfdsfdsfdsfsdfdsfdsfdsfdsklfdsjfkldsjfkldsjfldsjfkldsjfkldsjfdskl';

实际上是指

div1.innerHTML = div1.innerHTML + ooooooofdsfdsfdsfdsfdsfsdfdsfdsfdsfdsklfdsjfkldsjfkldsjfldsjfkldsjfkldsjfdskl';

所以在字面意义上，你正在用一个新的字符串覆盖div1的innerHTML，这反过来创建了div2的新对象。因此，您需要在innerHTML设置后添加单击侦听器。

相关内容

最新更新

热门标签：