javascript - jQuery mouseenter 适用于表数据，但不适用于整个表行

Question

我构建了一个表，如下所示:

  <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 第二次添加行。我错过了什么吗？

Answer 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:

试试这个可能会有所帮助