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股利，然后显示给用户。

由模态所需的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) 
} 

模态本身只是普通的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是不由主网页加载两种。总之，它的内容应该是唯一的，仅适用于莫代尔！