title: Document events unloaded upon replacing content
body: <p>I am trying to add a loading animation to present to users while the application performs some long operations, currently testing with the login screen.<br>
  To render the returned HTML from the actions, I am using the code from a post that shows how to use <code>IRazorViewEngine</code> and <code>ITempDataProvider</code> to render views to string. I am also using some code found in different sites to handle the loading animation when the AJAX request starts/ends:</p>
  
  <pre><code>//inside form:
  &lt;button type="button" id="btnLogin" class="btn btn-default"&gt;
  //below form:
  @section Scripts{
      &lt;script type="text/javascript"&gt;
          $(function ()
          {
              $body = $("body");
  
              $(document).on({
                  ajaxStart: function () { $body.addClass("loading"); },
                  ajaxStop: function () { $body.removeClass("loading"); }
              }); 
  
              $("#btnLogin").on("click", function (e)
              {
                  var form = $("#loginForm");
                  $.ajax({
                      cache: false,
                      async: true,
                      type: "POST",
                      url: form.attr('action'),
                      data: form.serialize(),
                      success: function (data)
                      {
                          $("#myDIV").html(data.viewResult);
                      }
                 });
              });
          });
      &lt;/script&gt;
  }
  </code></pre>
  
  <p><code>myDiv</code> is a simple div element that wraps the entire view. All works great, but when trying to perform the second AJAX request (because login failed due to invalid credentials) after all the div was replaced, the button does nothing.
  What do I have to modify in the jQuery code to make this work? Do I have to put the view inside a partial view and put the code as part of the parent and make the child host the form?</p>