Bootstrap 模态显示多次

Question

我有一个使用 C#、Bootstrap 2.3.2 和最新版本 jQuery 的 .NET 应用程序。 在我的 Javascript 文件中，每次用户单击按钮时，我都会通过向服务器发出 Ajax 请求来显示模态框，然后服务器会返回模态框的 HTML 以及所有信息：

听起来很复杂，但实际上很简单。

这是 CSHTML 文件：

//div for the EditPackage modal
<div id="editModal"></div>

这是显示模态的 JavaScript：

//Show Edit Package modal
    $("a.btn.btn-default.editPackage").click(function () {
        $.ajax({
            url: $(this).data('url'),
            type: 'get',
            cache: false,
            success: function (result) {
                $('#editModal').html(result).find('.modal').modal({
                    show: true
                });

            //the popup needs these files to work 
            //so we send them over the internet to the client !
            dyamicallyLoadJS("Scripts/myCustom.js");
            }
        });
        return false; //prevent browser defualt behavior
    });

所以，当我点击上述按钮时，服务器会收到请求，并将带有模式代码的 HTML 发送给我，然后将其放在 editModal div 中，然后显示给用户。

Modal需要的Javascript的动态加载是由同一个文件中的一个函数来完成的：

//http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
function dyamicallyLoadJS(filePath) {
    var fileref = document.createElement('script');
    fileref.setAttribute("type", "text/javascript");
    fileref.setAttribute("src", filePath);
    document.getElementsByTagName("head")[0].appendChild(fileref)
}

Modal 本身就是纯 HTML。很无聊：

@model AmarisGate.Model.ModalPackageInfo

@{
    ViewBag.Title = "_ModalPackageInfo";
}

<div class="modal fade" id="@Model.modalId" tabindex="-1" role="dialog" aria-labelledby="@Model.modalId" aria-hidden="true">
    <div class="modal-dialog" style="overflow-y: auto; max-height: 80vh;">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">@Model.modalTitle</h4>
            </div>
            <div class="modal-body" data-val="@Model.packageId">
                <form class="form-horizontal">
                    <div class="control-group">
                        <label class="control-label">Package Name: </label>
                        <div class="controls">
                            <input type="text" class="form-control" id="package-name" placeholder="@Model.pkgNamePlaceHolder">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">Select the Function:</label>
                        <div class="controls">
                            <input class="select2s" data-edit-values="@Model.functionsString" data-o2f-placeholder="Select Employee Function..." data-o2f-url="@Url.Action("FunctionsMultiple", "Home")" data-val="false" id="SubCategoryId" name="SubCategoryId" multiple="multiple" type="text"/>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">Select the materials:</label>
                        <div class="controls">
                            <input class="select2s" data-edit-values="@Model.materialsString" data-o2f-placeholder="Select Materials..." data-o2f-url="@Url.Action("MaterialsMultiple", "Home")" data-val="false" id="MaterialId" name="MaterialId" multiple="multiple" type="text" />
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">Company:</label>
                        <div class="controls">
                            <input class="select2s" data-edit-values="@Model.companiesString" data-o2f-placeholder="All Companies (default)" data-o2f-url="@Url.Action("CompaniesMultiple", "Home")" data-val="false" id="CompaniesId" name="CompaniesId" multiple="multiple" type="text" />
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="@Model.saveButtonId" data-url="@Model.saveButtonUrl">@Model.saveButtonText</button>
            </div>
        </div>
    </div>
</div>

但是，我有一个问题。如果我单击一次按钮，弹出窗口会显示一次，这很好。如果我单击它两次，它会显示两次，这很烦人。如果我点击它 X 次，它会出现 X 次，这简直太糟糕了。

据我了解，出现此错误是因为每次单击“编辑”按钮时，我都会发送并加载一个 Javascript 文件。然后下次我点击按钮时，我会运行我得到的上一个文件，加上新的，等等。

我该如何解决这个问题？ 如何防止 JavaScript 文件被多次运行？

Answer 1

bug的解决方法：

• 确保MyCustom.js 中的内容也没有被主页加载。简而言之，它的内容应该是唯一的，并且只适用于 Modal！