Question

我正在开发一个带有jQuery（2.2.0版）模式窗口的项目，其中包含以下代码：小提琴：https://jsfiddle.net/8f9fh9p0/1/

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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

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

疯了，不是吗？

任何人都知道在JavaScript，CSS或HTML中需要改变什么以及我需要改变什么来解决这个问题？

提前谢谢。

下面显示了更短，更清晰和改进的代码（，提供了分辨率）。 https://jsfiddle.net/r5aff042/

Answer 1

这不是那么疯狂。每次运行buildModalWindow函数时，都会向openWindow元素添加另一个“click”处理程序。奇怪的是，这也是你首先运行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>

Answer 2

你可以试试这个：

function buildModalWindow(values){
    jQuery(document).off('click', '#openWindow');
    jQuery(document).off('click', '#close');
    jQuery(document).off('click', '#mask');

    // the rest of your code here...

}

Answer 3

试试这个：My example

您的按钮：

 <div>
     <input type="button" value="Open Modal Window" id="openWindow" data-values="3">
  </div>

OnClick事件：

$(document).ready(function() {
    $("#openWindow").click(function(e) {
      e.preventDefault();
      // other way to manage the "values"
      // You also can add the values in hidden inputs 
      buildModalWindow($(this).attr("data-values"));
    });
});

建立模态： 请注意，我删除了此功能中的其他事件，它是＆＃34;复制＆＃34;每次点击按钮

function buildModalWindow(values){
   // modal content... 
   // 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>');
   // Modal Buttons Events
   jQuery(document).on('click', '#close', function (e) {
      hideAll(); // reuse code
   });
   jQuery(document).on('click', '#mask', function(e) {
      hideAll(); // reuse code
   });
 }

HideAll功能：

function hideAll(){
    $('#formContent').empty();
    $('#formContent').remove();
    $('#frameModal').hide();
    $('#mask').hide(); // Hide the mask
    $('#frameModal').empty();
   $('#frameModal').hide(); // also hide the frameModal
}

jQuery - 对模态窗口的打开和关闭事件的不期望的递归操作

3 个答案: