html中在某个父元素动态生成列表子元素，添加点击事件，利用事件委托

浩冉学编程2026-01-14 11:23

在web的html中，假设我要设计一个列表，并且每个列表点击后可以携带参数跳转到另一个网址

我们一般想当然通过for循环，然后在每个列表标签div内层或外层包裹一个a，然后使得这个a标签的href设置成对应携带参数的网址，比如：

javascript 复制代码

<div id = "listIdDiv"><div>


var str = "";
for (var i = 0 ;i< list.length ; i++){
  str += '<a id="itemCard" href = "/list/detail?id=' + i + '"><div>列表</div></a>'
}
$("#listIdDiv").html(str);

可结果发现，点击列表既然没反应？？？

解决方案：

html中在某个父元素动态生成列表子元素，添加点击事件，利用事件委托

javascript 复制代码

    $("#listIdDiv").on('click', '.itemcard', function(event) {  
        // 这里 'this' 指向被点击的 .itemcard 元素  
        var url = $(this).find('a').attr('href'); // 假设每个 .itemcard 内都有一个 <a> 标签，其 href 属性包含要导航的 URL  
        if (url) {  
            window.location.href = url; // 导航到该 URL  
        } else {  
            console.error('No href attribute found on the <a> element inside the clicked .itemcard.');  
        }  
    });  

//这个要写在生成后，或前面，在for循环前或后

最后才能给每个列表绑定上相关的a标签的href事件