1

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

第一次调用该函数时它工作得很好。单击按钮，灯箱显示，单击灯箱，它消失。但是，如果您尝试再次单击按钮，则不会发生任何事情 - 不会调用 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();
        }
    }

有任何想法吗？

4

1 回答 1

6

不要添加到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);
}

试试看。

于 2012-12-15T04:52:11.947 回答