CODEWITHSUNDEEP
jquery
Evik James
Evik James

Reputation: 10493

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

Upvotes: 0

Views: 154

Answers (4)

Rafay
Rafay

Reputation: 31043

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

Upvotes: 1

Claudio
Claudio

Reputation: 5980

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

Upvotes: 0

Anh Pham
Anh Pham

Reputation: 5481

How about this?

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

Upvotes: 0

PeeHaa
PeeHaa

Reputation: 72681

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/

Upvotes: 0

Related Questions