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中，然后显示给用户。< / p>

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

错误的解决方案：

确保主页加载MyCustom.js中的内容不。简而言之，它的内容应该是唯一的，仅适用于Modal！

Bootstrap模态显示多次

1 个答案: