Question

我有一个页面在页面加载时呈现时效果很好。（当我将鼠标悬停在它们上面时，我的行应突出显示。）

当我通过jQuery加载事件加载页面时，页面呈现完美，但是当悬停时，行不会突出显示。

我很确定问题是在发生加载时没有更新DOM。通常，通过整合直播活动可以轻松解决这个问题。

这不行。你可能知道它为什么不起作用？

<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

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

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

修改

mouseenter和mouseover之间的区别在于mouseenter（和mouseleave）不会起泡。这意味着如果鼠标移动到您绑定的元素中的任何元素（这可能不是您想要的），您将获得鼠标悬停事件，而如果鼠标输入该元素本身，您将只获得mouseenter事件。有关示例，请参阅documentation。

参考：Jquery help me analyze what happened: mouseover/mouseout ok but not hover/unhover

Here是另一个链接

Answer 2

您需要将live()用于要动态添加元素的事件，而不是添加元素的函数。

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

此外，您可能需要查看delegate()以获得更好的效果。

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

Answer 3

这个怎么样？

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

Answer 4

在容器上使用.delegate（）并设置

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

为什么live（）和load（）不起作用？

4 个答案: