数据堆积的 Bootstrap 3 模态问题

Question

有严重的数据问题。

我有一个按钮、脚本操作、引导模式确认。

问题

在模态上单击删除和协议，就像一个魅力。一键点击，一个网络选项卡/删除操作。但是，单击“delete>cancel”、“delete>cancel”等会添加尽可能多的网络选项卡/删除操作（检查 img）

注意！ 问题不是 404，而是采取了两个（或更多）操作，即使取消应该删除以前的信息/数据。没有数组，没有模态剩余，但是一旦您单击同意确定，就会产生与您之前取消的一样多的网络操作/帖子。奇怪的是，如果您单击其他删除，它也会添加 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>

期待

我的问题是 - 每次单击取消时我都需要重置它！有什么想法吗？

更新

它会影响所有模式。一旦您打开一个类似的模态，它就会开始堆积数据并影响您之前打开的所有内容。

Answer 1

已经有一段时间了，没有人有解决方案。幸运的是，我找到了一个。这相当简单。问题是点击的动作绑定：每次打开模式时，都会构建新的点击事件，但在动作/事件完成或页面刷新之前永远不会发生。所以解决方案很简单 - 在点击之前添加关闭！没有必要从上面复制所有代码，所以只是麻烦的部分！

...
    case "approve_remove":
      const elem_ = button_.parent().parent();
      modal_.find(".modal-body").html(`${question_}`);
      $("#confirmed").off("click");
      $("#confirmed").on("click", function(e) {
...

这将修复所有在模式取消/关闭时堆积的双重、三重等事件！