Why is live() and load() not working?

I have a page that works perfectly when it's rendered upon page load. (My rows are supposed to highlight when I hover over them.)

When I load the page via a jQuery load event, the page renders perfectly, but the rows do not highlight when hovered over.

I'm pretty sure the problem is t开发者_如何学运维hat the DOM isn't being updated when load occurs. Usually, this is solved easily by integrating the live event.

This isn't working though. Might you know why it's not working?

<script type="text/javascript">
$(document).ready(function() {

$("#ListByFranchisor").live("click", function() {
        $("#ListResultsDiv").load("advisors/recommendationsbyfranchisors.cfm").slideDown();
});

});
</script>



$(".data tr:not(.head)").mouseover(function() {
    $(this).addClass('over');
});

$(".data tr").mouseout(function() {
    $(this).removeClass('over');
});

$(function(){  
  $(".data tr:not(.head)").live({
            mouseenter:function()
               {
                 $(this).addClass('over');
               }
    });

    $(".data tr").live({
             mouseleave:function()
               {
                 $(this).removeClass('over');
               }
    });
});           

EDIT

The difference between mouseenter and mouseover is that mouseenter (and mouseleave) don't bubble. This means that you'll get a mouseover event if the mouse moves into any element inside the one you bound to (which is probably not what you want), whereas you'll only get a mouseenter event if the mouse entered that element itself. For an example, see the documentation.

REF: Jquery help me analyze what happened: mouseover/mouseout ok but not hover/unhover

Here is another link

You need to use live() for the event you want to bind on the dynamicly added elements and NOT on the function that adds the elements.

$(document).ready(function() {
  $("#ListByFranchisor").click(function() {
    $("#ListResultsDiv").load("advisors/recommendationsbyfranchisors.cfm").slideDown();
  });

  $(".data tr:not(.head)").live('mouseover', function() {
    $(this).addClass('over');
  });

  $(".data tr").live('mouseout', function() {
    $(this).removeClass('over');
  });
});

Also you might want to look into delegate() for better performance.

http://api.jquery.com/delegate/

How about this?

$(".data tr:not(.head)").live('mouseover',function(){ $(this).addClass('over');}).live('mouseout',function(){$(this).removeClass('over');});

Use .delegate() on the container and you're set

$(".data").delegate('tr:not(.head)', 'mouseover', function() {
   $(this).addClass('over');
}).delegate('tr.over', 'mouseout', function() {
   $(this).removeClass('over');
});