Javascript Jquery模式弹出窗口被反复重新提交

我正在使用

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

   });
  }
});

jQuery（文档）.ready（函数（$）{
$（文档）。单击（e=>{
if（！$（e.target）.is（“.modal content，#closeBtn”））{
$（“.modal”）.remove（）；
}
});
$（“.add_to_cart_button”）。在（“单击”，e=>{
如果（$（“.modal”）.length）{
$（“.modal”）.remove（）；
}
//获取当前productItem
设currentItem=e.currentTarget；
//获得产品名称
让productTitle=$（currentItem）
.parent（）
.parent（）
.parent（）
.next（）
.查找（“h2”）
.text（）；
//把头衔传给莫代尔
添加的证书（产品名称）；
});
//模态弹出窗口
函数addedToCart（productTitle）{
如果（$（“.modal”）.length）{
$（“正文”）
.find（“.modal”）
.remove（）；
}
//倾听事件
$（“正文”）。关于（“添加到购物车”，函数（e，数据）{
//生成动态弹出窗口
让modalHtml=''；
modalHtml+=''；
modalHtml+=''；
modalHtml+='&次；
';
modalHtml+=''；
模态HTML+=
“”+productTitle+“呃blevet tilføjet til kurven！
”；
modalHtml+=“”；
modalHtml+=“”；
modalHtml+=“”；
//将模态附加到body和show
$（“正文”）.append（modalHtml）；
$（“.modal”）.show（）；
//关闭模式并从DOM中删除
$（“.closeBtn”）。在（“单击”，（）=>{
$（“.modal”）.remove（）；
});
});
}
});

---

有人能告诉我我做错了什么吗？它似乎不在乎我是否删除了它，夸张地说，我在任何地方都可以删除它，但没有运气，每次打开它都会重复播放

每次单击购物车按钮时，您都会绑定添加的购物车到购物车事件

如果在那里使用它，则需要解除绑定，否则只需定义一次