title: Getting jquery event to fire for element in ajax loaded partial view (bootstrap modal form)
body: <p>I'm trying to figure out the correct approach for initializing jquery events referencing partial view elements loaded via ajax. Specifically I'm trying to use bootstrap-datepicker.js in a in a bootstrap modal form. </p>
  
  <p>Background: Had a functioning page with datepicker working. Project for today was to convert that form to a bootstrap modal. A lot of what I did came from <a href="https://stackoverflow.com/questions/16011151/mvc-4-edit-modal-form-using-bootstrap/16011752#16011752">MVC 4 Edit modal form using Bootstrap</a></p>
  
  <p>All that is working fine. Since I am now loading the partial view via ajax, datepicker doesn't work. I understand the problem, I just don't know the solution. Any advice appreciated. </p>
  
  <p><strong>Calling view has</strong> </p>
  
  <pre><code>&lt;div class="modal hide fade in" id="addclassroom"&gt;
      &lt;div id="classroom-container"&gt;&lt;/div&gt;
  &lt;div&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function () {
      $('#addclassbtn').click(function () {
          var url = "/Quiz/AddClassroom?quizId=@ViewBag.quizid"; 
          $.get(url, function (data) {
              $('#classroom-container').html(data);
              $('#addclassroom').modal('show');
          });
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Controller:</strong> </p>
  
  <pre><code>public ActionResult AddClassroom(int quizId)
  {
      var classroom = ...
      return PartialView("_AddClassroom",classroom);
  }
  </code></pre>
  
  <p><strong>Partial View:</strong> </p>
  
  <pre><code>@using (Ajax.BeginForm("AddClassroom", "Quiz", FormMethod.Post,
                      new AjaxOptions
                      {
                          //InsertionMode = InsertionMode.Replace,
                          HttpMethod = "POST",
                          UpdateTargetId = "addclassroom"
                      }))
      {
          @Html.ValidationSummary()
          @Html.AntiForgeryToken()
          &lt;div class="modal-body"&gt;
              &lt;fieldset class="QuizDisplayFields"&gt;
                  *fields...etc*
                  @Html.TextBoxFor(model =&gt; model.StartDate, new {@class="datefield" })
                  @Html.ValidationMessageFor(model =&gt; model.StartDate)
                  *more fields...*
                  &lt;input type="submit" class = "btn btn-primary" value="Save" /&gt;
              &lt;/fieldset&gt;
          &lt;/div&gt;
      }
  
  &lt;link href="~/Content/datepicker.css" rel="stylesheet" /&gt;
  &lt;script src="~/Scripts/bootstrap-datepicker.js"&gt;&lt;/script&gt;
  
     &lt;script&gt;
      $(document).ready(function () {
          $("#StartDate").datepicker();
      });
     &lt;/script&gt;
     &lt;script&gt;
         $(function ($) {
             $("#StartDate").on("click").datepicker();
         });
     &lt;/script&gt;
  </code></pre>