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

时间:2015-12-08 09:28:56

标签: javascript jquery hover

我在表格单元格上有一个带有悬停事件的表,用于切换标题单元格中的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);
});
&#13;
table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

.column-hover {
    color: white;
    background: #2196F3;
    z-index: 201;
    font-weight: 500;
}
&#13;
<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>
&#13;
&#13;
&#13;

我错过了什么?

我有一个小提琴: http://jsfiddle.net/Ltcppvpy/

1 个答案:

答案 0 :(得分:3)

附加的html(变量html)没有类.data,因此首先应将其添加到事件选择器列表('.data, .item')和{{1}中如果您向其附加元素,则不会更新,因此我的建议是使用cells代替$('body')cells - &gt; cells.on)。

使用以下代码: Jsfiddle

$('body').on