javascript - Jquery Modal 弹出窗口一遍又一遍地重新渲染

Question

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

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

每次点击购物车按钮时都会绑定(bind) added_to_cart 事件。

如果您在那里使用它，则需要取消绑定(bind)它，否则您应该只定义一次。