有关动态创建的HTML事件的JavaScript问题

Question

我在使用JavaScript定位动态创建的元素时遇到了一些问题.

问题1

缩短的JavaScript代码:

var lightbox = document.createElement('div'),
    nav = document.createElement("nav"),
    imga = document.querySelectorAll(".gallery a");
for (i = 0; i < imga.length; i++) {
    imga[i].addEventListener("click", function() {
        document.body.insertBefore(lightbox, document.body.firstChild);
        lightbox.appendChild(nav);
    });
}

1:现在我想在我的活动上做一个活动<nav>.如何将事件定位到目标#lightbox nav a而不仅仅是#lightbox nav？

nav.addEventListener("click", function() {
    // works, but I want to target only the <a> links inside
});

我尝试了很多东西,比如:

var selector = document.querySelectorAll("nav a");
for (i = 0; i < selector.length; i++) {
    selector[i].addEventListener("click", function() {
        // doesn't work because the <nav> is inserted dynamically
    });
}

还有这个:

var selector = nav.getElementsByTagName("a");
for (i = 0; i < selector.length; i++) {
    selector[i].addEventListener("click", function() {
        // doesn't work because the <nav> is inserted dynamically
    });
}

问题2

缩短的JavaScript代码:

var img,
    imga = document.querySelectorAll(".gallery a");
for (i = 0; i < imga.length; i++) {
    imga[i].addEventListener("click", function() {
            for (i = 0; i < imga.length; i++) {
                img = document.createElement("img");
                lightbox.appendChild(img);
            }
    });
}

2:如何向动态创建的事件添加事件#lightbox img？在img = document.createElement("img")必须追加多个图像的功能里面,因为这个原因,我不能做这样的(如目前的<nav>):

img.addEventListener("click", function() {
    // doesn't work because img = document.createElement("img")
    // has to be inside another function
});

有人可以帮我这个吗？我对JavaScript不是很有经验.

Answer 1

就我而言，解决方案并不太难。@adeneo 让我考虑嵌套事件处理程序，结果证明它工作得很好 - 并且我能够使用所有选择器而无需修改：

var lightbox = document.createElement('div'),
    nav = document.createElement("nav"),
    imga = document.querySelectorAll(".gallery a"),
    gallery = document.getElementsByClassName("gallery"),
    img;
for (i = 0; i < imga.length; i++) {
    imga[i].addEventListener("click", function() {
        lightbox.appendChild(nav);
        document.body.insertBefore(lightbox, document.body.firstChild);
        for (i = 0; i < imga.length; i++) {
            img = document.createElement("img");
            lightbox.appendChild(img);
        }
        lightbox.addEventListener("click", function() {
            // works fine
        });
        var nava = document.querySelectorAll("#lightbox nav a");
        for (i = 0; i < nava.length; i++) {
            nava[i].addEventListener("click", function() {
                // works fine
            });
        }
        var limg = document.querySelectorAll("#lightbox img");
        for (i = 0; i < limg.length; i++) {
            limg[i].addEventListener("click", function() {
                // works fine
            });
        }
    });
}