Question

我在JavaScript中添加了一些我添加到网站的元素。当我向按钮添加eventlistener时，只有第一个按钮工作并运行该函数。

我以前做过这个并且工作正常，任何想法我在这里做错了什么？

我的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");
}

Answer 1

您正在向第一个匹配的选择器添加事件侦听器。尝试做：

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

假设object.projectID具有唯一ID

Answer 2

来自querySelector documentation：

返回值

表示文档中与指定的CSS选择器集匹配的第一个元素的Element对象，如果没有匹配则返回null。

您只将事件侦听器添加到与选择器匹配的第一个按钮。相反，您可以使用元素ID：

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

for循环中动态创建按钮的addEventListener问题

2 个答案: