如何使用jquery在动态加载的HTML元素上附加事件？

k97glaaz 于 2022-11-29 发布在 jQuery

关注(0)|答案(2)|浏览(156)

我正在尝试为动态加载的卡上的产品创建一个添加到购物车的功能。我有类add-cart的按钮。我正在尝试在单击时将产品附加到UL中，但是用一个简单的警告来测试我的代码。下面是我的HTML代码：

function loadCard(id, name, imgSrc, price) {
      var template =
         '<div class="pork-items col-lg-3 col-md-4 col-sm-6">\
         <div class="card h-100">\
           <div class="card-header">'+ name + '</div>\
           <img src="' + imgSrc + '" alt="' + name + '">\
           <div class="card-body">\
             <h2>' + price + '</h2>\
             <div class="d-grid gap-2">\
               <button type="button" id="cart'+id+'" class="add-cart btn btn-lg btn-danger">Add to cart</button>\
             </div>\
           </div>\
         </div>\
       </div>' ;

      var cardContainer = document.getElementById('cardContainer');

      cardContainer.innerHTML += template;

   }

这就是我目前对jquery所做的尝试。在我真正让cart做一些有意义的事情之前，只是想让它发出警报：

$(document).ready(function(){
   $(document).on('click', '.add-cart', function(){
      alert ("added to cart");
   })
});

按钮没有按我希望的方式响应。有人知道解决这个问题的方法吗？

jquery

来源：https://stackoverflow.com/questions/74533221/how-do-attach-events-on-dynamically-loaded-html-elements-with-jquery

2条答案

按热度按时间

l5tcr1uw1#

在已经添加html标记之后添加事件处理程序。如下所示：

function loadCard(id, name, imgSrc, price) {
      var template =
         '<div class="pork-items col-lg-3 col-md-4 col-sm-6">\
         <div class="card h-100">\
           <div class="card-header">'+ name + '</div>\
           <img src="' + imgSrc + '" alt="' + name + '">\
           <div class="card-body">\
             <h2>' + price + '</h2>\
             <div class="d-grid gap-2">\
               <button type="button" id="cart'+id+'" class="add-cart btn btn-lg btn-danger">Add to cart</button>\
             </div>\
           </div>\
         </div>\
       </div>' ;

      

   $("#cardContainer").html( template);
   $(".add-card").off("click").click( function(){
      alert ("added to cart");
   });
   }

赞(0）回复(0）举报 2022-11-29

dxpyg8gm2#

我会添加一个事件侦听器到包含您的产品的div，如下所示，虽然产品不是动态创建的，但如果动态创建的产品在产品列表div中，这将适用于这些产品。
问题是当你创建你的事件监听器时，动态创建的产品还不存在，通过将你的事件监听器添加到初始加载时就存在的DOM元素中，你可以避免这个问题。例如：

$("#productList").on("click", ".addToCart", function() {});

这个函数会监听id为productList的DOM元素中的任何click事件，然后检查点击的元素是否具有addToCart类，如果是，则运行函数。初始化此代码时，不需要存在具有.addToCart的元素，只需要存在id为productList的父div。
您可以将其附加到您的body，但这样会出现性能问题，您不希望每次单击都检查是否是向购物车添加商品的请求。您应该找到最具体的元素，其中包含所有产品卡。
该示例已完全注解。
第一次

赞(0）回复(0）举报 2022-11-29

我来回答

如何使用jquery在动态加载的HTML元素上附加事件？

2条答案

相关问题

热门标签

最新问答