重新加载表格后，悬停时的jQuery无法正常工作

Question

我试图在单元格悬停时使表中的列突出显示。当页面加载时，它运行良好。但是，当要更改的显示行或输入搜索字符串等操作时，我正在用ajax调用重新加载表。.table_wrapper中的表已被ajax调用中的新表替换后，悬停不再起作用。

下面是对该问题的模拟。如您在单击重新加载表格按钮后所看到的，突出显示不再起作用。我该如何解决？

$(document).ready(function() {
  // Toggle highlight column
  $(".table td, .table th").hover(function() {
    $(".table td:nth-child(" + ($(this).index() + 1) + ")")
    .toggleClass("table__highlight_column");
  });
  
  // Reload table
  $("#reload").on("click", function() {
    $(".table__wrapper").html("");
    $(".table__wrapper").html(
       '<table class="table">'+
         '<thead>'+
           '<tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>'+
         '</thead>'+
         '<tbody>'+
           '<tr><td>Row 1</td><td>Row 1</td><td>Row 1</td></tr>'+
           '<tr><td>Row 2</td><td>Row 2</td><td>Row 2</td></tr>'+
           '<tr><td>Row 3</td><td>Row 3</td><td>Row 3</td></tr>'+
         '</tbody>'+
       '</table>');
  });
});

.table__highlight_column {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="table__wrapper">
  <table class="table">
    <thead>
      <tr>
        <th>
          Column 1
        </th>
        <th>
          Column 2
        </th>
        <th>
          Column 3
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1</td>
        <td>Row 1</td>
        <td>Row 1</td>
      </tr>
      <tr>
        <td>Row 2</td>
        <td>Row 2</td>
        <td>Row 2</td>
      </tr>
      <tr>
        <td>Row 3</td>
        <td>Row 3</td>
        <td>Row 3</td>
      </tr>
    </tbody>
  </table>
</div>

<button id="reload">
reload table
</button>