Question

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

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

CODE

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.

Javascript - 功能只运行一次，但永远不会再运行

1 个答案: