jQuery悬停事件在鼠标悬停时触发两次

Question

我正在尝试使用此jQuery临时更改悬停时div的内容：

$(document).ready( function() {
    var $ratingHtml = '';
    $('.userRating').hover(
        function() {
            $ratingHtml = $(this).html();
            alert($ratingHtml);
            $(this).html( 'Log in to rate' );
        },
        function() {
            alert($ratingHtml);
            $(this).html( $ratingHtml );            
        }
    );
});

但是，在悬停时，警报会出现两次 - 首先是原始HTML内容，然后是“登录评分”字符串。似乎发生了第二次鼠标悬停事件。我该如何解决这个问题？

Answer 1

我决定采用不同的解决方案 - 在叠加层中添加文字：

$('.userRating').hover(
    function() {
        $('<div class="loginMsg">Log in to rate</div>').appendTo('.userRating');
    },
    function() {
        $('.loginMsg').remove();
    }
);

CSS中有适当的样式。

Answer 2

我认为这是因为事件传播。请参阅以下链接，了解如何避免它：

How to stop event propagation with inline onclick attribute?

http://snipplr.com/view/2810/stop-event-propagation-stop-an-event-from-bubbling-up/

Answer 3

这个问题已经被问到并回答here @ stackoverflow.com ....

你可以使用这个jQuery plugin ...它可以帮助你悬停......