jquery 卡片项目点击事件无效

Question

我用 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 函数及其 Ok。但问题是卡片按钮的点击事件不起作用！

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

Answer 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

绑定点击事件

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

已编辑

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

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

或

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

希望这对您有所帮助。

jquery 卡片项目点击事件无效

jquery Card item click event doesn't work

html

jquery

card