时间戳

首页 > 解决方案 > 每次打开时重复的模态数

javascript - 每次打开时重复的模态数

问题描述

我有一个在其中加载表单的模式。但是，每次我单击按钮打开模态时，它都会复制以前的模态数。它以 1 为星号，然后是 2、4、8、16 等等……

这是我的代码：

$('#createButton').click(function () {
    var url = $('#createModal').data('url');

    $.get(url, function (data) {
        $('#modalContent').html(data);
        $('#createModal').modal('show');
    });
});

<div id="createModal" class="modal fade" role="dialog" data-url='@Url.Action("Create")'>
    <div class="modal-dialog" id="dialog">
        <div class="modal-content" id="modalContent">

        </div>
    </div>
</div>

非常感谢您的帮助！

编辑：我在同一页面中确实有另一个模式，即使它有不同的 id。如果我评论其中一个，仍然会遇到同样的问题。

<div id="editModal" class="modal fade" role="dialog">
   <div class="modal-dialog" id="dialogEdit">
      <div class="modal-content" id="modalContentEdit">

      </div>
   </div>
</div>

$(document).ready(function () {
    $(".menuActionsLink").click(function () {
        var url = $(this).data('url');

        $.get(url, function (data) {
            $('#modalContentEdit').html(data);
            $('#editModal').modal('show');
        });
    });
});

标签： javascripthtmlbootstrap-modal

解决方案

这应该可行，我认为您可能有其中一个 ID 的重复项，也许 id="createModal" 在您的代码中被提及两次。孤立地看，这段代码运行良好，这表明还有其他问题。如果您真的很挣扎，您可以通过执行类似的操作来检查该元素是否已存在于该 div 中，以检查该元素是否不存在。

我假设 createModal 尚未在 modalContent 中。如果是这种情况，您可以检查长度是否小于 1。如果它已经存在，那么也许您应该检查is(':visible').

$('#createButton').click(function () {
    var url = $('#createModal').data('url');
    $.get(url, function (data) {
      if($('#modalContent #createModal').length <= 1) {
        $('#modalContent').html(data);
        $('#createModal').modal('show');
      }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="createButton">
  Click me
</div>

推荐阅读