Złapanie elementu tworzonego dynamicznie

pytanie zadane 22 czerwca 2017 w JavaScript przez nitrio578 Początkujący (270 p.)

Witam

Mam problem ze złapaniem elementu input, który jest tworzony dynamicznie w kodzie js. Gdy wpisuje document.querySelector('input'), to łapie innego inputa tego z html, a gdy robię to taką samą operację, ale po klasie dostaje błąd że input is null. Z góry dzięki za pomoc.

http://wklej.org/id/3206497/ html

http://wklej.org/id/3206498/ JS

3 odpowiedzi

odpowiedź 22 czerwca 2017 przez imklau Nałogowiec (42,090 p.)
wybrane 22 czerwca 2017 przez nitrio578

Najlepsza

dokładnie tak, jak ProgramistaStepek napisał.
Musisz użyć event delegation. Dodaj sobie wcześniej jakąś klasę do tego, co chcesz chwycić, np 'checkbox' i coś w tym stylu powinno pomóc:

const box = document.querySelector('#box');
box.addEventListener('click', function(e) {

      if(e.target.className === "checkbox") {

        alert('yesss!');

    };

ewentualnie jakbyś tworzył elementy za pomocą document.createElement('input') a później dodawał im osobno klasę to w takim przypadku chyba zwyczajnie można je później złapać za pomocą np querySelector('nazwa-klasy') ;)

komentarz 22 czerwca 2017 przez nitrio578 Początkujący (270 p.)

Zrobiłem coś takiego;

 const input = document.querySelector('.checkbox');
    input.addEventListener('checked',function(e){
        
         if(e.target.className === "checkbox") {
 
        alert('yesss!');
         }
        
    });

a w miejsce tworzenia obiektu dodałem klasę checkbox

.....'<input class = "checkbox" type="checkbox" aria-label="...">'+..........

A konsola wyrzuca błąd od razu po odświeżeniu strony że input is null

komentarz 22 czerwca 2017 przez imklau Nałogowiec (42,090 p.)

dlatego, że nadal w zmiennej próbujesz przechować ten element, którego nie możesz chwycić ;)
złap za rodzica, który masz w normalnym kodzie HTML. Ja użyłam tego boxa i dopiero na nim dałam e.target itd

komentarz 22 czerwca 2017 przez nitrio578 Początkujący (270 p.)

Zrobiłem takie coś:

   box.addEventListener('checked',function(e){
        
         if(e.target.className === "checkbox") {
 
        alert('yesss!');
         }
        
    });

box w html zamieniłem z id na klasę, to nie działało więc złapałem za ul w tym divie box dałem mu klasę

  const input  = document.querySelector('.click');
   input.addEventListener('checked',function(e){
        
         if(e.target.className === "checkbox") {
 
        alert('yesss!');
         }
        
    });

<div class = "box">
 
    <ul class = "click">
       
    </ul>
      
    </div>
</div>

i też nie działa tylko błędów nie wyrzuca

komentarz 22 czerwca 2017 przez imklau Nałogowiec (42,090 p.)

mi od razu błąd przy całym Twoim kodzie wyrzucało bo gdzieś podpiąłeś funkcję remove mimo, że ją zakomentowałeś i nie dało rady jej wykonać.

kod, który działa

Użyłam do tego #box i do niego dałam zdarzenie kliknięcia, ale kod został wykonany dopiero wtedy, kiedy w elemencie #box został kliknięty konkretny element o klasie checkbox. Właśnie tam wyżej w Twoim kodzie, dodałam klasę 'checkbox' żeby można było złapać ten element.

Mam nadzieję, że już jest ok wszystko ;)

komentarz 22 czerwca 2017 przez nitrio578 Początkujący (270 p.)

ok dzięki za wszystko

komentarz 22 czerwca 2017 przez imklau Nałogowiec (42,090 p.)

proszę ;)

komentarz 22 czerwca 2017 przez Tomek Sochacki Ekspert (227,510 p.)

Unikałbym nadawania klasy "checkbox", ale co ważniejsze przyrównywania className === "checkbox". W tym momencie działa to, jeśli element ma tylko jedną klasę!

Lepiej użyć classList.contains("checkbox") co sprawdza, czy element posiada m.in. klasę "checkbox" a nie tylko i wyłącznie tą klasę. Drobny szczegół, ale może czasem nieco zburzyć działanie aplikacji po modyfikacji html.

Proponuję zajrzeć tutaj: classList

Ewentualnie jeśli musisz wspierać stare IE to można to sprawdzić metodą indexOf:

if (~element.className.indexOf("checkbox")) {
    //kod gdy element posiada klasę "checkbox"
}

komentarz 22 czerwca 2017 przez imklau Nałogowiec (42,090 p.)

oo classList.contains nie używałam, ale często mi tego brakowało :<
Dzięki! ;)

1	komentarz 22 czerwca 2017 przez Tomek Sochacki Ekspert (227,510 p.) Przydatne jest też classList.toggle(), i w połączeniu z querySelectorAll() jQuery traci na znaczeniu w małych projekcikach... :)