jQuery表格新增行hover无右侧操作框问题求助

我来帮你搞定这个问题！你的核心困扰在于动态生成的元素没绑定事件——jQuery的直接事件绑定只对页面加载时就存在的元素生效，后来通过JS新增的表格行，得用事件委托才能触发事件。另外还有几个小细节需要调整，下面是完整的解决方案：

问题根源 #

1. 初始的$('tbody tr').hover()只绑定了页面加载时已存在的行，新添加的行不会触发这个hover事件，导致右侧操作框无法显示。
2. 全局变量obj没有正确声明，容易引发作用域混乱，导致删除/插入操作出错。
3. 操作框的hover显示逻辑和行hover有冲突，需要简化优化。

修改后的完整代码 #

HTML #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div class="content">
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Date</th>
          <th>Email</th>
          <th>Address</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="name">Doe, John</td>
          <td class="data">Sample Data</td>
          <td class="edit">edit</td>
          <td class="trash">delete</td>
        </tr>
        <tr>
          <td class="name">Smith, Jane</td>
          <td class="data">Another Sample</td>
          <td class="edit">edit</td>
          <td class="trash">delete</td>
        </tr>
        <tr>
          <td class="name">T, Mister</td>
          <td class="data">Samples are Best in Threes.</td>
          <td class="edit">edit</td>
          <td class="trash">delete</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="option"></div>
</div>

CSS #

.main { display: flex }
.content { max-width: 700px; }
thead { background: #f2f2f2; }
th, td { padding: 10px; }
tbody { background: #f5f5f5 }
input { outline: none; border: none; padding: 6px; background: none; width: 92%; }
tr:hover { background: red !important; }
input:focus { border: solid 1px #bebebe }
.option { visibility: hidden; position: relative; }
.option.show { visibility: visible; }
.add { display: inline-block; width: 50px; background: #f5f5f5; padding: 10px; margin: 0 1px; cursor: pointer; }

JavaScript #

var options = '<div class="add delete">Delete</div>' + 
              '<div class="add insert_before">Add &uarr;</div>' + 
              '<div class="add insert_after">Add &darr;</div>';
$('.option').append(options);
$('td').wrapInner('<input type="text"/>');

// 用事件委托处理动态行的hover事件
let currentRow;
$(document).on('mouseenter', 'tbody tr', function() {
  currentRow = $(this);
  const top = $(this).position().top;
  $('.option').addClass('show').css({ 'margin-top': top });
});

$(document).on('mouseleave', 'tbody tr', function() {
  $('.option').removeClass('show');
});

// 事件委托处理删除按钮点击
$(document).on('click', '.delete', function() {
  if (currentRow) {
    currentRow.remove();
  }
});

const row = '<tr>' + 
            '<td class="name"></td>' + 
            '<td class="data"></td>' + 
            '<td class="edit"></td>' + 
            '<td class="trash"></td>' + 
            '</tr>';

// 插入行到上方
$(document).on('click', '.add.insert_before', function() {
  if (currentRow) {
    currentRow.before(row);
    currentRow.prev().children('td').wrapInner('<input type="text"/>');
  }
});

// 插入行到下方
$(document).on('click', '.add.insert_after', function() {
  if (currentRow) {
    currentRow.after(row);
    currentRow.next().children('td').wrapInner('<input type="text"/>');
  }
});

关键修改说明 #

• 事件委托：用$(document).on(event, selector, handler)绑定事件，不管是初始行还是动态新增的行，都能触发对应的hover和点击事件。
• 变量优化：用let currentRow替代全局obj，避免全局变量污染，确保操作的是当前hover的目标行。
• hover逻辑拆分：把原来的hover()拆分成mouseenter和mouseleave的事件委托，更清晰地控制操作框的显示与隐藏。
• CSS简化：移除了.option:hover的规则，避免和行hover逻辑冲突，只通过show类来控制操作框的可见性。

这样修改后，新添加的行hover时操作框会正常显示，所有按钮操作也能精准作用于目标行啦！

内容的提问来源于stack exchange，提问作者vietphong