在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

通過在<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">