Jquery mouseenter doesn't fire after html change

Question

I have html table like this:

<div id="recommendation">
  <table id="category_selected">
    <tr>
      <td>1</td>
    </tr>
  </table>
</div>  

and jquery like this:

$(function()
{
    $("#recommendation tr").mouseenter(function()
    {   
        alert("Yes");
    }
}

and everything works fine. But when I change html of recommendation with this:

$.post("path/script.php", {dataIn: dataInEncoded}, function(data, status)
{
    if(status == 'success')
    {
        $("#recommendation").html(data);
        /*(data exactly the same as default html)
           <table id="category_selected">
             <tr>
               <td>1</td>
             </tr>
           </table>
        */
    }
}

Jquery mouseenter suddenly doesn't work (trigger).

Answer 1

You need to use the delegated ("live") function.

$("body").on("mouseenter","#recommendation tr",function()
{   
    alert("Yes");
}

the event will listen to all the elements, listened in the second parameter, that are present or will be created in the "body" element.

You can anchor the function to the first non-mutable element, for example

$("#recommendation").on("mouseenter","tr",function()
{   
    alert("Yes");
}