title: jQuery Scripts not working after ajax call
body: <p>I have a partial view that has a table that is using jQuery DataTables.</p>
  
  <pre><code>@model IEnumerable&lt;DSPFuelLog.Models.code_AutoMake&gt;
  
  &lt;h3&gt;Auto Make List&lt;/h3&gt;
  &lt;table id="Auto-Make-Table" class="table table-bordered table-striped"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th class="col-md-5"&gt;
                  @Html.DisplayNameFor(model =&gt; model.AutoMake)
              &lt;/th&gt;
              &lt;th class="col-md-5"&gt;
                  @Html.DisplayNameFor(model =&gt; model.Active)
              &lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
  
      &lt;tbody&gt;
          @foreach (var item in Model)
          {
              &lt;tr&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.AutoMake)
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.Active)
                  &lt;/td&gt;
                  @if (!item.Active)
                  {
                      &lt;td&gt;
                          @Html.ActionLink("Edit", "Edit", new { id = item.MakeID }) |
                          &lt;a href="#" class="text-info js-automake-activate" data-automake-id="@item.MakeID" data-automake-name="@item.AutoMake"&gt;Activate&lt;/a&gt;
                      &lt;/td&gt;
                  }
                  else
                  {
                      &lt;td&gt;
                          @Html.ActionLink("Edit", "Edit", new { id = item.MakeID }) |
                          &lt;a href="#" class="text-danger js-automake-delete" data-automake-id="@item.MakeID" data-automake-name="@item.AutoMake"&gt;Deactivate&lt;/a&gt;
                      &lt;/td&gt;
                  }
  
              &lt;/tr&gt;
          }
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>On my main view I call this partial like so:</p>
  
  <pre><code>&lt;div id="myDiv"&gt;
      @{
          Html.RenderAction("Index", "code_AutoMake");
      }
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my script to setup the DataTable:</p>
  
  <pre><code>var autoMakeTable = $("#Auto-Make-Table").DataTable({
      "bPaginate": false,
      "bFilter": false,
      "aoColumnDefs": [
          { "bSortable": false, "aTargets": [2] },
          { "bSearchable": false, "aTargets": [2] }
      ]
  });
  </code></pre>
  
  <p>Now, as you can see on the partial view.. depending on whether or not the item is active or not.. either an <code>activate</code> or <code>deactivate</code> link will appear.</p>
  
  <p>Here is my script for what happens when I click <code>deactivate</code></p>
  
  <pre><code>$("#Auto-Make-Table").on("click",
      ".js-automake-delete",
      function() {
  
          var link = $(this);
          var autoMakeName = $(this).data("automake-name");
          var autoMakeId = $(this).data("automake-id");
  
          bootbox.confirm("Are you sure you want to deactivate this auto make?",
              function(result) {
                  if (result) {
                      $.ajax({
                          url: infoGetUrl + autoMakeId,
                          method: "DELETE",
                          success: function(response) {
                              $.ajax({
                                  url: "@Url.Action("Index", "code_AutoMake")",
                                  method: "GET",
                                  success: function(data) {
                                      //Here just render that partial view like 
                                      $("#myDiv").html('')
                                          .html(data);//This will empty first then render the new data
                                      $(body).html(response);
                                  }
                              });
                              toastr.success(autoMakeName + " successfully deleted");
                          },
                          error: function(jqXHR, textStatus, errorThrown) {
                              var status = capitalizeFirstLetter(textStatus);
                              var error = $.parseJSON(jqXHR.responseText);
                              console.log(error);
                              toastr.error(status + " - " + error.exceptionMessage);
                          }
                      });
                  }
              });
      });
  </code></pre>
  
  <p>Now, this script reloads my table, and the <code>Deactivate</code> link becomes <code>Activate</code>.. but when I click on the <code>Activate</code> link.. nothing happens.. and that link is setup the same exact way as the <code>Deactivate</code> link.. so with jQuery &amp; ajax..</p>
  
  <p>So after my table reloads.. the scripts no longer work.</p>
  
  <p>How do I get my scripts to continue working?</p>
  
  <p>Any help is appreciated.</p>
  
  <p><strong>Script for activate</strong></p>
  
  <pre><code>$("#Auto-Make-Table").on("click",
      ".js-automake-activate",
      function() {
  
          var link = $(this);
          var autoMakeName = $(this).data("automake-name");
          var autoMakeId = $(this).data("automake-id");
  
          alert('test');
  
          bootbox.confirm("Are you sure you want to activate this auto make?",
              function(result) {
                  if (result) {
                      $.ajax({
                          url: infoGetUrl + "ActivateAutoMake/" + autoMakeId,
                          method: "PUT",
                          success: function(response) {
                              $.ajax({
                                  url: "@Url.Action("Index", "code_AutoMake")",
                                  method: "GET",
                                  success: function(data) {
                                      //Here just render that partial view like 
                                      $("#myDiv").html('')
                                          .html(data);
                                      $(body).html(response); //This will empty first then render the new data
                                  }
                              });
                              toastr.success(autoMakeName + " successfully activated");
                          },
                          error: function(jqXHR, textStatus, errorThrown) {
                              var status = capitalizeFirstLetter(textStatus);
                              var error = $.parseJSON(jqXHR.responseText);
                              console.log(error);
                              toastr.error(status + " - " + error.exceptionMessage);
                          }
                      });
                  }
              });
      });
  </code></pre>