jquery Card项目点击事件不起作用答案

【问题标题】：jquery Card item click event doesn't workjquery Card项目点击事件不起作用
【发布时间】：2022-01-07 06:10:35
【问题描述】：

我用 jquery 为卡片编写了 HTML 标签。我希望在单击每张卡片上的按钮后显示每个项目。但是用我写的代码，没有调用其他按钮的点击事件，只调用了第一张卡片的按钮事件。这是 HTML 代码：

<body>
<p class="app-title p-5">Products</p>
<div class="row row-cols-1 row-cols-md-4 g-4 m-5" id="productList"></div>
<script>
    getProducts();
</script>
</body>

jquery 函数：

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

getProducts() 函数将产品模型发送到 showProducList 函数及其确定。但问题是这个卡片按钮的点击事件不起作用！

$("#productList").click(function() {
$("#btnPrint").click(function() {
    console.log("clicked");
        var productId= $(this).parent().prevAll("h5").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();        
});});

【问题讨论】：

标签： html jquery card

【解决方案1】：

我不知道你为什么在$("#productList").click(function() { 中需要$("#btnPrint").click(function() { }

btnPrint 元素正在从 showProducList 函数呈现，这不能用于执行 javascript 代码。

您可以通过多种方式修复它。

1.使用$(document).ready(function{})

将您的代码移入$(document).ready(function{})

$(document).ready(function{
  $("#productList").click(function() {
    $("#btnPrint").click(function() {
      console.log("clicked");        
    });
  });
});

2。将点击事件与文档绑定

$(document).on("click", "#productList", function() {
  $(document).on("click", "#btnPrint", function() {
    console.log("clicked");        
  });
});

已编辑

假设您有多个具有相同 ID 的按钮。在这种情况下，最好使用按钮类btnPrint。

$(document).ready(function{
  $(".btnPrint").click(function() {
    console.log("clicked");        
  });
});

或

$(document).on("click", ".btnPrint", function() {
  console.log("clicked");        
});

希望对您有所帮助。

【讨论】：

非常感谢您的回复。它适用于卡上的其他按钮。但是当页面加载时，第一次点击按钮不起作用，我必须点击两次按钮。
而且当我点击其他卡片上的其他按钮时，只返回第一张卡片的值。
@tara1367 - 我认为存在一些实施问题。如果您要加载多个按钮，那么您应该提供唯一的 id 或在 click 中使用类。我正在编辑答案。
非常感谢。你拯救了我的一天。祝你好运。
@tara1367 - 听起来很棒！您可以选择它作为正确答案和/或投票。快乐编码:)