jQuery动态生成卡片的打印按钮点击事件仅首张生效问题咨询

• 重复ID冲突：HTML要求ID全局唯一，你所有生成的卡片都使用了相同的id="btnPrint"、id="col"、id="Id"等属性，jQuery的ID选择器$("#btnPrint")只会匹配页面中第一个出现的对应ID元素，所以只有首张卡片的按钮能触发事件
• 事件绑定逻辑错误：你将按钮点击事件的绑定嵌套在了#productList的点击回调内，每次点击外层容器都会重复绑定事件，且直接对动态生成的元素绑定事件，后续新增的卡片按钮不会被绑定到事件
• 未正确使用事件委托：动态插入DOM的元素需要通过事件委托绑定到页面初始就存在的父级元素上，才能适配后续新增的元素

第一步：移除模板中重复的ID #

修改showProducList函数，删除所有重复的固定ID，保留class属性即可：

function showProducList(product) {
return `
<div class="col">
    <div class="card h-100">
        <h5 class="productId card-title bg-primary text-white p-3 text-center">${product.id}</h5>
        <div class="card-body">
             <p class="productName card-text"><b>${product.name}</b></p>
             <p class="productPrice card-text"><b>${product.price}</b></p>
             <button class="btnPrint">print</button>
        </div>
    </div>
</div>
`;}

第二步：修改事件绑定逻辑，使用事件委托 #

删除原有嵌套的事件绑定代码，替换为以下委托绑定逻辑：

$("#productList").on("click", ".btnPrint", function() {
    console.log("clicked");
    var productId= $(this).parent().prevAll("h5.productId").text();
    var productName= $(this).siblings(".productName").text();
    var productPrice= $(this).siblings(".productPrice").text();
    window.localStorage.setItem("productId", productId);
    window.localStorage.setItem("productName", productName);
    window.localStorage.setItem("productPrice", productPrice);
    showPrintPreview();        
});

• 移除重复ID后，所有按钮都可以通过class选择器被正确识别，不会出现匹配优先级问题
• 使用on方法实现事件委托，将事件绑定在页面加载完成就存在的#productList父容器上，事件冒泡时会自动匹配触发源是否为.btnPrint按钮，所有动态新增的卡片按钮都可以自动触发该事件，不需要单独绑定
• 去掉了嵌套的绑定逻辑，避免事件被重复绑定导致的多次触发问题

内容的提问来源于stack exchange，提问作者tara1367