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

Posted 2023-05-07

【中文标题】在 for 循环中动态创建的按钮上的 addEventListener 问题

【英文标题】：addEventListener problems on dynamic created button within a for loop

【发布时间】：2018-11-16 13:27:37

【问题描述】：

我用 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" ></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");

【参考方案1】：

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

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

假设 object.projectID 有唯一的 ID

【讨论】：

感谢您抽出宝贵时间帮助我。我已经这样做了，问题是当我这样做时，我只能单击列表中最后添加的按钮。其他按钮不起作用。

【参考方案2】：

来自querySelector documentation：

返回值

一个 Element 对象，表示文档中匹配指定 CSS 选择器集的第一个元素，如果没有匹配则返回 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" ></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");

【讨论】：

感谢您花时间帮助我。我已经这样做了，问题是当我这样做时，我只能单击列表中最后添加的按钮。其他按钮不起作用。