jQuery mouseover 适用于表格数据，但不适用于整个表格行答案

【问题标题】：jQuery mousenter works on table data but not whole table rowjQuery mouseover 适用于表格数据，但不适用于整个表格行
【发布时间】：2014-11-17 12:53:19
【问题描述】：

我有一个如下构建的表：

  <table id="my_table">
     <tbody>
         <tr class="row"><th>No</th><th>Name</th><th>Age</th><th>Salary</th></tr>
         <tr class="row"><td>1</td><td>Yong Mook Kim</td><td>28</td><td>$100,000</td></tr>
         <tr class="row"><td>2</td><td>Low Yin Fong</td><td>29</td><td>$90,000</td></tr>
         <tr class="row"><td>3</td><td>Ah Pig</td><td>18</td><td>$50,000</td></tr>
         <tr class="row"><td>4</td><td>Ah Dog</td><td>28</td><td>$40,000</td></tr>
         <tr class="row"><td>5</td><td>Ah Cat</td><td>28</td><td>$30,000</td></tr>
     </tbody>
  </table>

我想对光标当前所在的整行做一些简单的效果。遗憾的是，事件仅在光标进入表格数据区域时触发。这是我的 Jquery 代码：

$( document ).ready(function() {
    $("#my_table").on("mouseenter", ".row", handle_zooming_in);
});

function handle_zooming_in() {  
        $("#pool").append("<img class=\"popup\" src="+image_url+">");
        $(".popup").css({"position":"absolute","left":event.pageX,"top":event.pageY}).show();
}

更清楚地说，handle_zooming_in 函数仅在光标位于标签内的单词上时触发。我可能还应该指出，当最初打开页面并通过 javascript 第二次添加行时，表是空的。我错过了什么吗？

【问题讨论】：

不是 .row 你应该使用 row
@Kermani, .row 是正确的，因为它是一个类。
似乎在这个jsFiddle中工作
我制作了一个 jsFiddle，其中包含一个添加行和一个 console.log 的间隔，并且被解雇得很好。 jsfiddle.net/bv7zzcy1/1
我在 chrome 中测试这个没有任何问题。 @EdanFeiles 提供的 jsFiddle 和我之前评论中的 jsFiddle。你都检查了吗？

标签： javascript jquery events hover mouseenter

【解决方案1】：

$(document).ready(function() {
  $("#my_table").on("mouseenter", ".row", handle_zooming_in);
});

function handle_zooming_in() {
  if($('td',this)>0){
 console.log("NOT EMPTY");
  $("#pool").append("<img class=\"popup\" src="+image_url+">");
   $(".popup").css({"position":"absolute","left":event.pageX,"top":event.pageY}).show();
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<table id="my_table">
  <tbody>
    <tr class="row">
      <th>No</th>
      <th>Name</th>
      <th>Age</th>
      <th>Salary</th>
    </tr>
    <tr class="row">
      <td>1</td>
      <td>Yong Mook Kim</td>
      <td>28</td>
      <td>$100,000</td>
    </tr>
    <tr class="row">
      <td>2</td>
      <td>Low Yin Fong</td>
      <td>29</td>
      <td>$90,000</td>
    </tr>
    <tr class="row">
      <td>3</td>
      <td>Ah Pig</td>
      <td>18</td>
      <td>$50,000</td>
    </tr>
    <tr class="row">
      <td>4</td>
      <td>Ah Dog</td>
      <td>28</td>
      <td>$40,000</td>
    </tr>
    <tr class="row">
      <td>5</td>
      <td>Ah Cat</td>
      <td>28</td>
      <td>$30,000</td>
    </tr>
    <tr class="row"></tr>
  </tbody>
</table>
And I would like to do some simple effects on the whole row the cursor is currently on. Sadly the events only fire when the cursor enters in a table data area. Here's my Jquery code:

试试这个可能会有帮助

【讨论】：

【解决方案2】：

在使用 javascript 添加行后声明 $("#my_table").on("mouseenter", ".row", handle_zooming_in);。

也许将该代码更改为$('.row').on("mouseenter", handle_zooming_in);？

【讨论】：

使用on 应该避免在存在#my_table" 时将元素加载到DOM 中。
是的，就是这个原因。
@RickHitchcock 也许你应该阅读前两段。在这种情况下需要存在的元素是#my_table，将选择器指定为参数意味着事件作为委托而不是直接附加。以这个答案为例：$("#my_table").on("mouseenter", ".row", handle_zooming_in); 是作为委托附加的事件，#my_table 需要存在，.row 不存在。但是$('.row').on("mouseenter", handle_zooming_in); 是一个直接附加的事件，所以.row 必须存在。
@frikinside，你是绝对正确的，我应该明白这一点。道歉！
@RickHitchcock 没问题！