QuerySelectorAll i pusty NodeList

Question

Cześć Generuje elementy HTML'owe za pomocą js'a. Mają one oczywiście swoje klasy po których łapie je za pomocą querySelectorAll niestety otrzymuje pusty nodelist.

 

function displayCustomers(customersModel) {
				var table = document.createElement('table');
				var tbody = document.createElement('tbody');
				var tbodyInfo = `<tr>
                    <th>Name</th>
                    <th>ID</th> 
                    <th>CustomerId</th>
                    <th>Customize</th>
                </tr>`;
				tbody.innerHTML += tbodyInfo;
        		 customersModel.customers.forEach(function(customer) {
					tbody.innerHTML +=`<tr>
                    <td class="userName">${customer.name}</td>
                    <td>${customer.loid}</td> 
                    <td>2</td>
                    <td><button class="customizeUser">+</button></td>
				</tr>`
				
				});
				table.appendChild(tbody);
				document.body.appendChild(table);
				
			}
			var customizeButtons = document.querySelectorAll(".customizeUser");
			console.log(customizeButtons);

Niestety w tym wypadku jest pusty NodeList, jakies porady? 

Answer 1

Na oko widzę dwie opcje:

- nie widzę, gdzie wywołujesz `displayCustomers`. Jeśli odpalasz `custom.lo` od razu po zdefiniowaniu funkcji bez wywoływania jej, to nic dziwnego.

- `customersModel.customers` jest pusty.

Comments

function fetchCustomers() {
            	invokeGET("http://localhost:8000/payments/getCustomers.json", {
            		onSuccess: function(data) {
            			displayCustomers(data);
            		},
            		onError: function(data) {
            			alert("Error");
            		},
            	});            	
            }

wywolanie displayCustomers, nie chcialem po prostu calego kodu wrzucac bo to bez sensu.

Customersmodel.customers nie ejst pusty, zwraca mi wszystkich customerow z jsona

---

To kolejne pytanie: czy nawet po pokazaniu listy na stronie, wpisanie `document.querySelectorAll(".customizeUser")` w konsoli pokazuje postą listę?

Osobiście zgaduję, że jest to spowodowane asynchronicznością i po prostu próbujesz wyciągnąć elementy, zanim jeszcze dostałeś odpowiedź z serwera.

---

Pewnie jest jak mowisz, z tym, ze jak obejsc te asynchronicznosc? Dodaje elementy z klasa w funkcji-to jasne, ale jak je wyswietlic?

---

chociaz np. getElementByClassName-działa