在 Bootstrap 模式中加载时，部分视图 JavaScript 多次运行

Question

我有以下用于模态的 HTML

<div id="mdEdit" class="modal fade" role="dialog" style="overflow:hidden;" data-width="800">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div>
                <img src="/Content/images/ico-cross.png" style="cursor:pointer; margin:10px; float:right" class="" data-dismiss="modal" alt="">
            </div>
            <div class="modal-body" style="padding:25px;" id="mdbEdit">
            </div>
        </div>
    </div>
</div>

我使用以下脚本在其中加载部分视图

function EditFile(gridId, fileID, ctrl) {
            var grid = $('#grid_' + gridId).data("kendoGrid");
            var dataItem = $("tr", grid.tbody).index($(ctrl).closest("tr"));
            $.ajax({
                url: "/I9Roster/EditFileAjax?Id=" + fileID + "&dataItemNo=" + dataItem + "&gridId=grid_" + gridId,
                cache: false,
                success: function (data) {

                    $('#mdEdit').modal('toggle');
                    $('#mdbEdit').html(data);

                }
            });
        }

我面临的问题是，我在主页上有一个项目列表，然后单击按钮，该按钮为某些项目一个一个加载模式，在部分视图中运行 javascript，模式弹出的次数。例如假设我单击第一项并以局部视图打开模态并且 javascript 仅运行一次，然后我关闭此模态并单击其他项以打开具有相同局部视图的模态。现在 javascript 运行两次，因为局部视图被加载了两次。这继续发生在模态中加载部分视图的次数。如何解决这个问题？

Answer 1

通过将包含将由 javascript 重写的 id 的 <div> 放置在此处解决了问题，而不是部分视图。

在您的情况下，包含 Modal 的部分视图将如下所示：

<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div>
            <img src="/Content/images/ico-cross.png" style="cursor:pointer; margin:10px; float:right" class="" data-dismiss="modal" alt="">
        </div>
        <div class="modal-body" style="padding:25px;" id="mdbEdit">
        </div>
    </div>
</div>

主页面中应放置以下 div：

<div id="mdEdit" class="modal fade" role="dialog" style="overflow:hidden;" data-width="800">