Javascript - 函数工作一次，但再也不会

Question

我正在构建一个非常简单的灯箱脚本；单击按钮时，将创建灯箱。当您点击灯箱背景时，它会被移除。

您第一次调用该函数时它工作正常。点击按钮，灯箱显示，点击灯箱，灯箱消失。但是，如果您尝试再次单击该按钮，则什么也不会发生 - div 不会被调用。没有控制台错误或任何错误，不知道是什么问题。

JSFIDDLE http://jsfiddle.net/3fgTC/

代码

function closeLightBox(){
        document.body.removeChild(lightBox);
}

function createElem(){
    var elem = "<div id='lightBox'></div>";
    var bodyElem = document.body;
        bodyElem.innerHTML = elem + bodyElem.innerHTML;
    var lightBox = document.getElementById("lightBox");
        lightBox.style.width = "100%";
        lightBox.style.height = "800px";
        lightBox.style.backgroundColor = "rgba(0,0,0,.5)";
        lightBox.onclick = function(){
            closeLightBox();
        }
}
var button = document.getElementsByClassName("btn");
    for (var i = 0; i<button.length; i++){
        button[i].onclick = function(){
            createElem();
        }
    }

有什么想法吗？

Answer 1

不要在 innerHTML 前面加上；这使得浏览器重新解析 HTML 并重新创建每个 DOM 元素，在此过程中丢失事件处理程序。相反，使用 document.createElement:

var lightBox = document.createElement('div');
document.body.insertBefore(lightBox, document.body.firstChild);

此外，内联 closeLightBox:

lightBox.onclick = function() {
    document.body.removeChild(lightBox);
}

Try it.