jQuery mousenter适用于表数据，但不适用于整个表行

jQuery mousenter works on table data but not whole table row

本文关键字：适用于 不适用 mousenter 数据 jQuery      更新时间：2023-09-26

我有一个表，构建如下： 

  <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 第二次添加行时，该表是空的。我错过了什么吗？

$(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:

试试这个可能会有所帮助

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

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

相关文章：