Проблемы addEventListener на динамически создаваемой кнопке внутри цикла for - PullRequest
Новая
       27

Проблемы addEventListener на динамически создаваемой кнопке внутри цикла for

0 голосов
/ 06 июня 2018

Я сделал несколько элементов в JavaScript, которые добавляю на сайт.Когда я добавляю обработчик событий к кнопке, только первая кнопка работает и запускает функцию.

Раньше я делал это раньше и работал нормально, есть идеи, что я делаю здесь неправильно?

моя функция JavaScript: 

function laadProjectDetails(){
	fetch("restservices/projectdetails")
	.then(response => response.json())
	.then(function(myJson) {
		for (const object of myJson) {
			var projextX = '<div class="row"><div class="cause content-box"><div class="col-md-5 col-sm-6"><div class="img-wrapper"><div class="overlay"></div><img class="img-responsive" src="assets/img/causes/img-1.jpg" alt=""></div></div><div class="col-md-7 col-sm-6"><div class="info-block"><h4><a href="#">'+object.projectNaam+'</a></h4><p>'+ object.projectBeschrijving +'</p><div class="foundings"><div class="progress-bar-wrapper min"><div class="progress-bar-outer"><p class="values"><span class="value one">Opgehaald: XXXX</span>-<span class="value two">Doel: €'+object.totaalBedrag+'</span></p><div class="progress-bar-inner"><div class="progress-bar"><span data-percent="55"><span class="pretng">55%</span> </span></div></div></div></div></div><div class="donet_btn"><input id="'+object.projectID+'" type="submit" value="Doneer" class="btn btn-min btn-solid"></input></div></div></div></div></div>';			
			document.querySelector("#showProject").innerHTML += projextX;


			var valueVerwijder = document.querySelector("div.donet_btn input[value='Doneer']");
			valueVerwijder.addEventListener("click", doneerFunc);
			
		}
		
	});
}

laadProjectDetails();

function doneerFunc(){
	console.log("test");
}

Ответы [ 2 ]

0 голосов
/ 06 июня 2018

Из querySelector документации :

Возвращаемое значение

Объект Элемент, представляющий первый элемент inдокумент, который соответствует указанному набору селекторов CSS, или null, если совпадений нет.

Вы добавляете прослушиватель событий только к первой кнопке, которая соответствует селектору.Вместо этого вы можете использовать идентификатор элемента: 

function laadProjectDetails(){
    fetch("restservices/projectdetails")
    .then(response => response.json())
    .then(function(myJson) {
        for (const object of myJson) {
            var projextX = '<div class="row"><div class="cause content-box"><div class="col-md-5 col-sm-6"><div class="img-wrapper"><div class="overlay"></div><img class="img-responsive" src="assets/img/causes/img-1.jpg" alt=""></div></div><div class="col-md-7 col-sm-6"><div class="info-block"><h4><a href="#">'+object.projectNaam+'</a></h4><p>'+ object.projectBeschrijving +'</p><div class="foundings"><div class="progress-bar-wrapper min"><div class="progress-bar-outer"><p class="values"><span class="value one">Opgehaald: XXXX</span>-<span class="value two">Doel: €'+object.totaalBedrag+'</span></p><div class="progress-bar-inner"><div class="progress-bar"><span data-percent="55"><span class="pretng">55%</span> </span></div></div></div></div></div><div class="donet_btn"><input id="'+object.projectID+'" type="submit" value="Doneer" class="btn btn-min btn-solid"></input></div></div></div></div></div>';          
            document.querySelector("#showProject").innerHTML += projextX;


            var valueVerwijder = document.getElementById(object.projectID);
            valueVerwijder.addEventListener("click", doneerFunc);

        }

    });
}

laadProjectDetails();

function doneerFunc(){
    console.log("test");
}
0 голосов
/ 06 июня 2018

Вы добавляете прослушиватель событий в первый соответствующий селектор.Попробуйте сделать: 

var valueVerwijder = document.getElementById(object.projectID);
valueVerwijder.addEventListener("click", doneerFunc);

Предполагая, что object.projectID имеет уникальный идентификатор

...