title: How to reattach event bindings after DOM is completely changed
body: <p>I am working on a C# Razor site and I am POSTing from a boostrap modal which then returns a new view and model. To reload the entire page with the response, I am using the following line within this code block.</p>
  
  <p>$("html").html(response);</p>
  
  <pre><code> function addDevice(e) {
          e.preventDefault();
          var ID = $("#txtNewDeviceID").val();
          var Name = $("#txtNewDeviceName").val();
  
          $.post('@Url.Action("AddDevice", "Devices")', { 'DeviceID': ID, 'DeviceName': Name }, function (response) {
              $('#newDeviceModal').modal('hide');
              $("html").html(response);
              AttachBindings();
          });
      }
  </code></pre>
  
  <p>Here is the code behind AttachBindings():</p>
  
  <pre><code>function AttachBindings() {
          $(document).on('click', 'table tr', {}, tableClick);
          $(document).on('keyup', '#search', {}, search);
          $(document).on('click', '#btnAdd', {}, function (e) {
              addDevice(e);
          });
          $(document).on('click', '#btnRemove', {}, function (e) {
              removeDevice(e);
          });
          $(document).on('click', '#btnUpdate', {}, function (e) {
              updateDevice(e);
          });
      }
  </code></pre>
  
  <p>Unfortunately AttachBindings() is never hit and I can't seem to find a way to reattach these events. The only event that seems to work is keyup which is attached to #search.  Any ideas on how to fix this?</p>