jQuery mousenter works on table data but not whole table row

Question

I have a table built as follows:

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

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:

$( 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();
}

To be more clear, the handle_zooming_in function only fires when the cursor is on a word that's inside a tag. I should probably also point out that the table is empty when the page is initially opened and rows are added in a second time via javascript. Am I missing something?

Answer 1

Declare $("#my_table").on("mouseenter", ".row", handle_zooming_in); after the rows are added with javascript.

And maybe change that code to $('.row').on("mouseenter", handle_zooming_in); ?

Answer 2

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

try this may it helps