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);
}

试试吧.