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

通过将<div>包含将由主页面上的javascript重写的id而不是部分视图来解决问题。

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

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

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

1 个答案: