Problemy JavaScript dotyczące zdarzeń dla dynamicznie tworzonego HTML

Question

Mam pewne problemy z kierowaniem dynamicznie tworzonych elementów przy pomocy JavaScript.

Issue 1

Skrócony kod 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: Teraz chcę zrobić imprezę na moim <nav>. Jak mogę przekonwertować wydarzenie na adres #lightbox nav a zamiast tylko #lightbox nav?

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

Próbowałem wielu rzeczy, na przykład:

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 
    }); 
} 

I tak:

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 
    }); 
} 

Issue 2

Skrócony kod 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: Jak dodać wydarzenie do dynamicznie tworzonego #lightbox img? img = document.createElement("img") musi być wewnątrz funkcji dołączania wielu obrazów, iz tego powodu nie mogę zrobić tak (jak obecnie na <nav>):

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

Czy ktoś mógłby mi pomóc w tej sprawie? Nie mam dużego doświadczenia z JavaScriptem.

Answer 1

W moim przypadku rozwiązanie nie było zbyt trudne. Dzięki temu, że @adeneo zmusił mnie do myślenia o obsłudze zdarzeń zagnieżdżania, okazało się, że działa dobrze - i mogłem używać wszystkich selektorów bez modyfikacji:

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 
      }); 
     } 
    }); 
} 

Answer 2

wydanie 2

Proste rozwiązanie polega na dodaniu obsługi zdarzeń dla wszystkich elementów wewnątrz pętli

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); 
     } 
    }); 
} 

Nieco trudniejsze rozwiązaniem jest użycie przekazane obsługi zdarzeń

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); 
     } 
    }); 
} 

Wydanie 1

może być rozwiązane jak wyżej, z delegowanym wydarzeniem ndler

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

     // an achor was clicked, do stuff 

    } 
});