Question

我正在使用jquery动态创建一个Modal弹出窗口。到目前为止一切都很好，但是一旦我打开它并关闭它，每次它再次被打开它都会渲染两次，我不知道为什么。这是我的代码：

jQuery(document).ready(function($) {
  $(document).click(e => {
    if (!$(e.target).is(".modal-content, #closeBtn")) {
       $(".modal").remove();
    }
  });

 $(".add_to_cart_button").on("click", e => {
    if ($(".modal").length) {
      $(".modal").remove();
    }
    // get current productItem
    let currentItem = e.currentTarget;

    // get product Title
    let productTitle = $(currentItem)
      .parent()
      .parent()
      .parent()
      .next()
      .find("h2")
      .text();

   // Pass Title to modal
   addedToCart(productTitle);
 });

 // Modal popup
 function addedToCart(productTitle) {
   if ($(".modal").length) {
     $("body")
       .find(".modal")
       .remove();
   }
   // Listen to event
   $("body").on("added_to_cart", function(e, data) {
     // Generate dynamic popup
     let modalHtml = '<div id="productModal" class="modal">';
     modalHtml += '<div class="modal-content">';
     modalHtml += '<div class="modal-header">';
     modalHtml += '<span class="closeBtn" id="closeBtn">&times;</span> 
     </div>';
     modalHtml += '<div class="modal-body">';
     modalHtml +=
      "<p><b>" + productTitle + "</b> er blevet tilføjet til kurven!</p>";
     modalHtml += "</div>";
     modalHtml += "</div>";
     modalHtml += "</div>";

     // Append modal to body and show
     $("body").append(modalHtml);
     $(".modal").show();

     // Close modal and remove from DOM
     $(".closeBtn").on("click", () => {
       $(".modal").remove();
     });

   });
  }
});

有人可以告诉我我在做什么错吗？似乎并不在乎是否将其删除，并且夸大地说，我会尽一切可能删除它，但是没有运气，每次打开它都会重新渲染。

Answer 1

每当您点击购物车按钮时，您就绑定了named_to_cart事件。

如果在此使用它，则需要取消绑定，或者只定义一次。

jQuery Modal弹出窗口一遍又一遍地渲染

1 个答案: