關於動態創建的 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
    });
}

第二期

縮短的 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

第二期

簡單的解決方案是將事件處理程序添加到循環內的所有元素

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");
            img.setAttribute("src", imga[i].getAttribute("href"));
            lightbox.appendChild(img);

            img.addEventListener('click', fn, false);
        }
    });
}

更難的解決方案是使用委托的事件處理程序

var img,
    imga = document.querySelectorAll(".gallery a");

lightbox.addEventListener('click', function(e) {
    if ( e.target.nodeType.toLowerCase() === 'img' ) {
         // do stuff
    }
}, false);

for (i = 0; i < imga.length; i++) {
    imga[i].addEventListener("click", function() {
        for (i = 0; i < imga.length; i++) {
            img = document.createElement("img");
            img.setAttribute("src", imga[i].getAttribute("href"));
            lightbox.appendChild(img);
        }
    });
}

第 1 期

可以像上面一樣解決，使用委托的事件處理程序

nav.addEventListener("click", function(e) {
    if ( e.target.nodeType.toLowerCase() === 'a' ) {

         // an achor was clicked, do stuff

    }
});

Answer 2

就我而言，解決方案並不太難。 隨着@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
            });
        }
    });
}