Javascript 事件侦听器不'；当我向div.innerHTML中添加某些内容时，无法工作_Javascript_Events_Html_Click

Javascript 事件侦听器不'；当我向div.innerHTML中添加某些内容时，无法工作

javascript events html

Javascript 事件侦听器不'；当我向div.innerHTML中添加某些内容时，无法工作,javascript,events,html,click,Javascript,Events,Html,Click,这是我的代码： <html> <head> <script type="text/javascript" language="javascript"> function load() { div1 = document.getElementById('div1'); div2 = document.getElementById('div2'); function c

这是我的代码：

<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=document.getElementById（'div1'）；
div2=document.getElementById（'div2'）；
函数clicky（）{
警报（“1”）；
}
div2.addEventListener（'click'，clicky）；
//div1.innerHTML+=“ooooooo fdsfdsfdsfsdsfdsfdsfdsklfdsjfkldsjfkldsjfkldsjfkldsjfkldsjfkldsjfkldsjfkldsjfkldsjfkldsjfkldsjfkldsjfkldsjfkldsjfkldsjfkldsjfkldsjfdskl”；
}       
X

所以，我有第二组在第1组。若注释的字符串真的被注释了，那个么一切都正常：点击div2会引起警报。但如果我将smth添加到div1.innerHTML中，事件处理程序将无法工作。问题出在哪里？

您的代码

div1.innerHTML += 'ooooooofdsfdsfdsfdsfdsfsdfdsfdsfdsfdsklfdsjfkldsjfkldsjfldsjfkldsjfkldsjfdskl';

实际上意味着

div1.innerHTML = div1.innerHTML + ooooooofdsfdsfdsfdsfdsfsdfdsfdsfdsfdsklfdsjfkldsjfkldsjfldsjfkldsjfkldsjfdskl';

因此，从字面意义上讲，您正在用一个新字符串覆盖div1的innerHTML，该字符串将创建一个新的div2对象。因此，您需要在设置innerHTML后添加click listener。

您有2个选项。或者稍后添加单击侦听器。或者使用div1.appendChild（）方法向该div添加一些内容，而不是重置innerHTML。jQuery解决了这个问题吗？