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 に答える