我正在使用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">×</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();
});
});
}
});
有人可以告诉我我做错了什么吗?它似乎并不关心我是否删除它,并且夸张地说,我在任何可以删除它的地方都删除了它,但不幸的是,每次我打开它时它都会重新渲染。
最佳答案
每次点击购物车按钮时都会绑定(bind) added_to_cart 事件。
如果您在那里使用它,则需要取消绑定(bind)它,否则您应该只定义一次。
关于javascript - Jquery Modal 弹出窗口一遍又一遍地重新渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52283224/