悬停在动态添加的表行上的效果

Hover effect on dynamically added table row

本文关键字：动态 添加 悬停      更新时间：2023-09-26

我有一个表，它在表单元格上有一个悬停事件，用于切换标题单元格中的css类。如果我动态地向表中添加一行，则该事件不会委派给新添加的行。我读到，如果我使用.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>

我错过了什么？

我这里有一把小提琴：http://jsfiddle.net/Ltcppvpy/

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

使用以下代码：Jsfidle

$('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');
相关文章：