javascript - jQuery - 对模态窗口的打开和关闭事件的意外递归操作

Question

我正在开发一个元素，该元素有一个 jQuery(2.2.0 版)模态窗口，代码如下: fiddle :https://jsfiddle.net/8f9fh9p0/1/

function buildModalWindow(values) {

  jQuery(document).on('click', '#openWindow', function(e) {

    e.preventDefault();

    // mask effect
    $('#mask').fadeIn(150);
    $('#mask').fadeTo("slow", 0.4);

    // frame effect
    $('#frameModal').fadeIn(500);

    // display the mask and the frame
    $('#mask').css("display", "block");
    $('#frameModal').css("display", "block");

    // HTML content in the frame
    $('#frameModal').html('<form id="formContent" name="formContent" method="post"><div class="myClass"><div class="linha fontmodalbold fontsize14"><label><span class="span-15">Some Form Title</span><span>Form Id</span></label></div><div class="linha"><label class="fontModalBold fontsize12">Atendant Type:</label><label class="fontModalBold fontsize12"><input type="radio" name="atendantType" id="correctiveAction" value="1"/>Corrective Action</label><label class="fontModalBold fontsize12"><input type="radio" name="atendantType" id="preventiveAction" value="2"/>Preventive Action</label><label class="fontModalBold fontsize12"><input type="radio" name="atendantType" id="project" value="3"/>Project</label><label class="fontModalBold fontsize12"><input type="radio" name="atendantType" id="contract" value="4"/>Contract</label></div><div class="direita"><input id="close" type="button" class="button" value="Close" /><input type="button" class="button" id="saveButton" value="Save" onclick="javascript: saveTheInformation();" /></div></div></form>');

  });

  // if close button is clicked
  jQuery(document).on('click', '#close', function(e) {

    e.preventDefault();

    $('#formContent').empty();
    $('#formContent').remove();

    $('#frameModal').css("display", "none");
    $('#mask').css("display", "none");

    $('#frameModal').empty();

  });

  // if div #mask is clicked
  jQuery(document).on('click', '#mask', function(e) {

    e.preventDefault();

    $('#formContent').empty();
    $('#formContent').remove();

    $('#frameModal').css("display", "none");
    $('#mask').css("display", "none");

    $('#frameModal').empty();

  });
}

#mask {
  position: absolute;
  left: 0;
  top: 0;
  background-color: #000;
  display: none;
  width: 500px;
  height: 300px;
}

#modalContent .window {
  position: absolute;
  left: 0;
  top: 0;
  width: 440px;
  height: 200px;
  display: none;
  z-index: 9999;
  padding: 20px;
}

#modalContent #frameModal {
  width: 385px;
  height: 300px;
  padding: 5px;
  background-color: #ffffff;
  overflow: auto;
  left: 200;
  top: 150;
}

.close {
  display: block;
  text-align: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <input type="button" value="Open Modal Window" id="openWindow" onclick="javascript: buildModalWindow(3);">
</div>
<div id="modalContent">
  <div id="frameModal" class="window"></div>
  <div id="mask"></div>
</div>

奇怪的是，如果你多次点击打开模态窗口又关闭它，你会面临一些不希望出现的递归情况。

如果我调用 get Ajax 方法在数据库中执行某些操作，它的行为就像一个几何级数。当我想注册一个新报告时，例如:- 单击第一个按钮，然后单击关闭或掩码单击:一条记录​​；- 关闭或掩码点击后的第二个按钮点击:3 条记录；- 第三个按钮点击关闭或掩码点击:6 条记录；- 等等。

疯了，不是吗？

有人知道发生了什么以及我必须在 JavaScript、CSS 或 HTML 中更改什么才能解决该问题吗？

提前谢谢你。

更短、更清晰和改进的代码(提供的解决方案)如下所示。 https://jsfiddle.net/r5aff042/

Answer 1

没那么疯狂。每次运行 buildModalWindow 函数时，您都会向 openWindow 元素添加另一个“单击”处理程序。奇怪的是，这也是您首先在其上运行 buildModalWindow 函数的元素，这是令人困惑的逻辑。您永远不会删除之前添加的处理程序，因此如果您运行该函数 3 次，那么它将添加那些处理人员反复。当您单击该按钮时，它会运行所有现有的处理程序(因此会出现多个记录，您也会在浏览器工具中看到多个 ajax 请求)并添加另一个单击处理程序以在下次运行。

这是一个固定版本。我也将其他事件处理程序移出您的函数，因为它们也会被复制，尽管效果没有那么成问题。

function buildModalWindow(values) {

  // mask effect
  $('#mask').fadeIn(150);
  $('#mask').fadeTo("slow", 0.4);

  // frame effect
  $('#frameModal').fadeIn(500);

  // display the mask and the frame
  $('#mask').css("display", "block");
  $('#frameModal').css("display", "block");

  // HTML content in the frame
  $('#frameModal').html('<form id="formContent" name="formContent" method="post"><div class="myClass"><div class="linha fontmodalbold fontsize14"><label><span class="span-15">Some Form Title</span><span>Form Id</span></label></div><div class="linha"><label class="fontModalBold fontsize12">Atendant Type:</label><label class="fontModalBold fontsize12"><input type="radio" name="atendantType" id="correctiveAction" value="1"/>Corrective Action</label><label class="fontModalBold fontsize12"><input type="radio" name="atendantType" id="preventiveAction" value="2"/>Preventive Action</label><label class="fontModalBold fontsize12"><input type="radio" name="atendantType" id="project" value="3"/>Project</label><label class="fontModalBold fontsize12"><input type="radio" name="atendantType" id="contract" value="4"/>Contract</label></div><div class="direita"><input id="close" type="button" class="button" value="Close" /><input type="button" class="button" id="saveButton" value="Save" onclick="javascript: saveTheInformation();" /></div></div></form>');

}

jQuery(document.ready(function() {

      // if close button is clicked
      jQuery(document).on('click', '#close', function(e) {

        e.preventDefault();

        $('#formContent').empty();
        $('#formContent').remove();

        $('#frameModal').css("display", "none");
        $('#mask').css("display", "none");

        $('#frameModal').empty();

      });

      // if div #mask is clicked
      jQuery(document).on('click', '#mask', function(e) {

        e.preventDefault();

        $('#formContent').empty();
        $('#formContent').remove();

        $('#frameModal').css("display", "none");
        $('#mask').css("display", "none");

        $('#frameModal').empty();

      });
    });

#mask {
  position: absolute;
  left: 0;
  top: 0;
  background-color: #000;
  display: none;
  width: 500px;
  height: 300px;
}

#modalContent .window {
  position: absolute;
  left: 0;
  top: 0;
  width: 440px;
  height: 200px;
  display: none;
  z-index: 9999;
  padding: 20px;
}

#modalContent #frameModal {
  width: 385px;
  height: 300px;
  padding: 5px;
  background-color: #ffffff;
  overflow: auto;
  left: 200;
  top: 150;
}

.close {
  display: block;
  text-align: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <input type="button" value="Open Modal Window" id="openWindow" onclick="javascript: buildModalWindow(3);">
</div>
<div id="modalContent">
  <div id="frameModal" class="window"></div>
  <div id="mask"></div>
</div>