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是不由主網頁加載兩種。總之，它的內容應該是唯一的，僅適用於莫代爾！