对动态添加的 table 行的悬停效果

Question

我有一个 table，在 table 单元格上有一个悬停事件，它在 header 单元格中切换 css class。如果我向 table 动态添加一行，事件不会委托给新添加的行。我读到如果我使用 .on() jquery 方法，那么它应该委托给动态添加的内容。但事实并非如此。

var table = $("table tr");

var cells = $("tr");
var headerCells = $(".col");

cells.on({
    mouseenter: function () {
        var cellIndex = $(this).index();
        headerCells.eq(cellIndex).addClass("column-hover");
    },
    mouseleave: function () {
        var cellIndex = $(this).index();
        headerCells.eq(cellIndex).removeClass("column-hover");
    }
}, '.data');

var html = '<tr><td class="item">added row</td><td class="item">added row</td><td class="item">added row</td><td class="item">added row</td><td class="item">added row</td></tr>';

$(".add").click(function() {
  cells.last().after(html);
});

table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

.column-hover {
    color: white;
    background: #2196F3;
    z-index: 201;
    font-weight: 500;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="add">add item</button>
<table>
  <thead>
    <tr>
      <th class="col">header 1</th>
      <th class="col">header 2</th>
      <th class="col">header 3</th>
      <th class="col">header 4</th>
      <th class="col">header 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="data">row 1, cell 1</td>
      <td class="data">row 1, cell 2</td>
      <td class="data">row 1, cell 3</td>
      <td class="data">row 1, cell 4</td>
      <td class="data">row 1, cell 5</td>
    </tr>
    <tr>
      <td class="data">row 2, cell 1</td>
      <td class="data">row 2, cell 2</td>
      <td class="data">row 2, cell 3</td>
      <td class="data">row 2, cell 4</td>
      <td class="data">row 2, cell 5</td>
    </tr>
    <tr>
      <td class="data">row 3, cell 1</td>
      <td class="data">row 3, cell 2</td>
      <td class="data">row 3, cell 3</td>
      <td class="data">row 3, cell 4</td>
      <td class="data">row 3, cell 5</td>
    </tr>
    <tr>
      <td class="data">row 4, cell 1</td>
      <td class="data">row 4, cell 2</td>
      <td class="data">row 4, cell 3</td>
      <td class="data">row 4, cell 4</td>
      <td class="data">row 4, cell 5</td>
    </tr>
    <tr>
      <td class="data">row 5, cell 1</td>
      <td class="data">row 5, cell 2</td>
      <td class="data">row 5, cell 3</td>
      <td class="data">row 5, cell 4</td>
      <td class="data">row 5, cell 5</td>
    </tr>
  </tbody>
</table>

我错过了什么？

我这里有一个fiddle： http://jsfiddle.net/Ltcppvpy/

Answer 1

附加的 html(变量 html) 没有 class .data 所以首先你应该把它添加到事件选择器列表 ('.data, .item' ) 并且 cells 在向其附加元素时不会更新，因此我的建议是使用 $('body') 而不是 cells(cells.on -> $('body').on)。

使用以下代码： Jsfiddle

$('body').on({
    mouseenter: function () {
        var cellIndex = $(this).index();
        headerCells.eq(cellIndex).addClass("column-hover");
    },
    mouseleave: function () {
        var cellIndex = $(this).index();
        headerCells.eq(cellIndex).removeClass("column-hover");
    }
}, '.data, .item');

对动态添加的 table 行的悬停效果

Hover effect on dynamically added table row

javascript

jquery

hover