javascript - 数据堆积的 Bootstrap 3 模态问题
问题描述
有严重的数据问题。
我有一个按钮、脚本操作、引导模式确认。
问题
单击模式上的删除和协议,就像一个魅力。一键点击,一个网络选项卡/删除操作。但是,单击“delete>cancel”、“delete>cancel”等会添加尽可能多的网络选项卡/删除操作(检查 img)
注意!问题不是 404,而是采取了两个(或更多)操作,即使取消应该删除以前的信息/数据。没有数组,没有模态剩余物,但是一旦您单击同意OK,就会进行与您之前取消的一样多的网络操作/帖子。奇怪的是,如果您单击其他删除,它也会添加 THAT,因此会有多个删除。这就像添加要删除的元素。
此处的代码示例:https ://jsfiddle.net/cvyw6758/4/
$(document).ready(function(){
$("#action_modal").on('show.bs.modal', function (event) {
let button_ = $(event.relatedTarget),
modal_ = $(this);
let id_ = (button_.data("row") ? button_.data("row") : ""),
question_ = (button_.data("modal_body") ? button_.data("modal_body") : ""),
title_ = (button_.data("modal_title") ? button_.data("modal_title") : "Agreement"),
action_ = (button_.data("action") ? button_.data("action") : false),
url_ = (button_.data("href") ? button_.data("href") : (button_.attr("href") ? button_.attr("href") : false));
modal_.find(".modal-title").html(title_);
// do confirm action
switch (action_) {
case "approve_remove":
const elem_ = button_.parent().parent();
modal_.find(".modal-body").html(`${question_}`);
$("#confirmed").on("click", function(e) {
e.preventDefault();
// do delete
$(this).off();
$.post(`${url_}${id_}`, function(data_) {
if(data_.status == "success") {
elem_.hide();
elem_.parent().next().html(`<td colspan="3">${data_.message}</td>`);
setTimeout(function() {
elem_.parent().parent().prev().slideUp("200").remove("");
elem_.parent().parent().slideUp("200").remove("");
}, 5000);
}
else {
$(`<tr><td colspan="3">${data_.message}</td></tr>`).insertBefore(elem_.parent());
setTimeout(function() {
elem_.parent().parent().prev().slideUp("200").remove();
}, 4000);
}
modal_.modal("hide");
}, "json");
});
break;
default:
console.log("No action assigned! Please inform IT department!");
modal_.find("#confirmed").hide();
modal_.find(".modal-body").html("No action assigned! Please inform IT department!");
break;
};
});
// reset modal
$("#action_modal").on('hidden.bs.modal', function (event) {
const modal_ = $(this);
modal_.removeData();
modal_.find(".modal-title").html("");
modal_.find(".modal-body").html("");
});
})
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- start of a modal -->
<div class="modal fade" id="action_modal" tabindex="-1" role="dialog" aria-labelledby="action_modal_label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="action_modal_label">Popup</h5>
</div>
<div class="modal-body">
<h4 class="text-zenter"></h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">cancel</button>
<button type="button" class="btn btn-primary" id="confirmed">ok</button>
</div>
</div>
</div>
</div>
<!-- end modal -->
<span class="glyphicon glyphicon-trash remove_comment_btn" id="remove_comment_btn_1790"
data-toggle="modal" data-target="#action_modal" data-href="/do_delete/" data-row="1790"
data-action="approve_remove"
data-modal_title="Agreement"
data-modal_body="are you sure you want to delete?"
aria-selected="false" aria-hidden="true"> Delete 1790</span>
<br />
<span class="glyphicon glyphicon-trash remove_comment_btn" id="remove_comment_btn_1791"
data-toggle="modal" data-target="#action_modal" data-href="/do_delete/" data-row="1791"
data-action="approve_remove"
data-modal_title="Agreement"
data-modal_body="are you sure you want to delete?"
aria-selected="false" aria-hidden="true"> Delete 1791</span>
期待
我的问题是 - 每次单击取消时我都需要重置它!有任何想法吗?
更新
它似乎会影响所有模态。一旦您打开其中一个类似的模式,它就会开始堆积数据并影响您之前打开的所有内容。
解决方案
已经有一段时间了,没有人有解决方案。幸运的是,我找到了一个。这相当简单。问题是点击的动作绑定:每次打开模式时,都会构建新的点击事件,但在动作/事件完成或页面刷新之前永远不会发生。所以解决方案很简单 - 在点击之前添加关闭!没有必要从上面复制所有代码,所以只是麻烦的部分!
...
case "approve_remove":
const elem_ = button_.parent().parent();
modal_.find(".modal-body").html(`${question_}`);
$("#confirmed").off("click");
$("#confirmed").on("click", function(e) {
...
这将修复模式取消/关闭时堆积的所有双重、三重等事件!
推荐阅读
- angular - Angular2:单击按钮将文本框条目添加到跨度
- html - Django 表单提交重定向问题
- r - 用另一个数据框中匹配行的值替换缺失的数据
- android-studio - ImageView' 是多余的
- firebase - 如何在 Firebase Crashlytics 中搜索崩溃?
- dart - 如何在颤动的http.MultipartRequest请求上上传文件时获取进度事件
- php - 将对象保存到会话 - 如何像以前一样从会话中获取对象?
- python - 从python中的序列列表中创建一个矩阵
- bash - 成功运行 docker-compose 后 Bash 退出
- android - 静态 SharedPreferences 变量上的 NullPointerException