title: Bootstrap modal showing multiple times
body: <p>I have a .NET application using C#, Bootstrap 2.3.2 and the latest version of jQuery. 
  In my Javascript file, I show a Modal everytime the user clicks a button, by making an Ajax request to the server which then returns the HTML for the modal with all the information:</p>
  
  <p>Sounds complex, but in reality is quite simple. </p>
  
  <p>This is the CSHTML file:</p>
  
  <pre><code>//div for the EditPackage modal
  &lt;div id="editModal"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>This is the JavaScript that shows the modal:</p>
  
  <pre><code>//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
      });
  </code></pre>
  
  <p>So, when I click the said button, the server receives the request, and sends me the HTML with the modal code, which then is placed inside the <code>editModal</code> div, which then is shown to the user.</p>
  
  <p>The dynamic loading of the Javascript needed by the Modal is done by a function in the same file:</p>
  
  <pre><code>//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)
  }
  </code></pre>
  
  <p>The Modal itself is just plain HTML. It is quite boring:</p>
  
  <pre><code>@model AmarisGate.Model.ModalPackageInfo
  
  @{
      ViewBag.Title = "_ModalPackageInfo";
  }
  
  &lt;div class="modal fade" id="@Model.modalId" tabindex="-1" role="dialog" aria-labelledby="@Model.modalId" aria-hidden="true"&gt;
      &lt;div class="modal-dialog" style="overflow-y: auto; max-height: 80vh;"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;h4 class="modal-title" id="myModalLabel"&gt;@Model.modalTitle&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body" data-val="@Model.packageId"&gt;
                  &lt;form class="form-horizontal"&gt;
                      &lt;div class="control-group"&gt;
                          &lt;label class="control-label"&gt;Package Name: &lt;/label&gt;
                          &lt;div class="controls"&gt;
                              &lt;input type="text" class="form-control" id="package-name" placeholder="@Model.pkgNamePlaceHolder"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="control-group"&gt;
                          &lt;label class="control-label"&gt;Select the Function:&lt;/label&gt;
                          &lt;div class="controls"&gt;
                              &lt;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"/&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="control-group"&gt;
                          &lt;label class="control-label"&gt;Select the materials:&lt;/label&gt;
                          &lt;div class="controls"&gt;
                              &lt;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" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="control-group"&gt;
                          &lt;label class="control-label"&gt;Company:&lt;/label&gt;
                          &lt;div class="controls"&gt;
                              &lt;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" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
                  &lt;button type="button" class="btn btn-primary" id="@Model.saveButtonId" data-url="@Model.saveButtonUrl"&gt;@Model.saveButtonText&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, I have a problem. If I click the button once, the popup shows once, which is quite fine. If I click it twice, it shows twice, which is annoying. If I click it X times, it appears X times, which is simply terrible.</p>
  
  <p>From my understanding, this bug occurs because each time I click the Edit button, I send and load a Javascript file. Then the next time I click the button, I will run the previous file that I got, plus the new one, and so on.</p>
  
  <p>How do I fix this?
  How do I keep the JavaScript files from being run multiple times?</p>