Question

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 that 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');
});

Answer 1

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/