获取cookie值后，jquery hover不起作用

Question

我有一个项目列表与一个视图切换器的列表视图，画廊和网格。

<div class="theView">
    <div class="galS active" id="gal"><span><img src="layout/cyt/img/blank.gif"></span>Galerie</div>
    <div class="mosS" id="mos"><span><img src="layout/cyt/img/blank.gif"></span>Mosaik</div>
    <div class="listS" id="list"><span><img src="layout/cyt/img/blank.gif"></span>Liste</div>
</div>


    <div id="itemcontainer">
        <div class="con">
        <div class="item_page_item list"> //list,mos,gal
            <div class="item sale"><span class="number">1</span>
                <div class="pos">
                    <div class="inner">
                    <div class="itemImg Img123"></div>
                    ...
                    </div>
               </div>
           </div>
        </div>
    </div>

我在将视图更改为cookie时保存了每个值：

$("#gal").click(function() {
    $("#gal").addClass("active");
    $("#list").removeClass("active");
    $("#mos").removeClass("active");
    $(".item_page_item").fadeOut(200, function() {
        $.cookie("theView", "g", { expires: 7, path: "/" });
        $(this).removeClass("list");
    $(this).removeClass("mos");
    $(this).addClass("gal").fadeIn(200);
    });
    return false;
});

当首先打开列表视图并更改为网格或图库时，带有集成轮播的悬停窗格不会打开，在所有其他情况下，一切都正常。

以下是hover函数的代码：

    $(".item_page_item.mos").hover(function(){
          $(this).find(".pane").stop(true, true).fadeIn();
          $("#paneImg",this).carouFredSel({
                responsive: true,
                circular: false,
                auto: false,
                items: {
                    visible: 1,
                    width: 299,
                    height: 241
                },
                scroll: {
                    fx: 'directscroll'
                }
            });

            $("#paneThumb",this).carouFredSel({
                responsive: true,
                circular: false,
                infinite: false,
                auto: false,
                prev: '#prev',
                next: '#next',
                items: {
                    visible: {
                        min: 2,
                        max: 5
                    },
                    width: 51,
                    height: 42
                }
            });
            $('#paneThumb a',this).click(function() {
                $('#paneImg').trigger('slideTo', '#' + this.href.split('#').pop() );
                $('#paneThumb a').removeClass('selected');
                $(this).addClass('selected');
                return false;
            });
        },function(){
          $(this).find(".pane").stop(true, true).fadeOut(200, function() {
            $("#paneImg",this).trigger("destroy", true);
          });
        });

悬停时，覆盖会通过旋转木马(caroFredsel)在项目上淡入淡出。

唯一的问题是，当我将列表视图保存在cookie中时，它不能工作，用这个视图打开页面，然后切换到其他视图之一。

希望你能帮我，我快疯了。

读取cookie值的函数：

$(function() {  
        var cc = $.cookie("theView");
        if (cc == "g") {
            $(".item_page_item").removeClass("list");
            $(".item_page_item").removeClass("mos");
            $(".item_page_item").addClass("gal");
            $("#gal").addClass("active");
            $("#list").removeClass("active");
            $("#mos").removeClass("active");

        } else if (cc == "m") {
            $(".item_page_item").removeClass("gal");
            $(".item_page_item").removeClass("list");
            $(".item_page_item").addClass("mos");
            $("#mos").addClass("active");
            $("#gal").removeClass("active");
            $("#list").removeClass("active");
        } else if (cc == "l") {
            $(".item_page_item").removeClass("gal");
            $(".item_page_item").removeClass("mos");
            $(".item_page_item").addClass("list");
            $("#list").addClass("active");
            $("#gal").removeClass("active");
            $("#mos").removeClass("active");
        }       
     });

Answer 1

你可以测试这个使用委托的代码，也许你的问题来自这里：{替换你的悬停处理程序}

$(document).on('mouseenter mouseout', '.item_page_item.mos', function (e) {
    if (e.type === 'mouseenter') {
        $(this).find(".pane").stop(true, true).fadeIn();
        $("#paneImg", this).carouFredSel({
            responsive: true,
            circular: false,
            auto: false,
            items: {
                visible: 1,
                width: 299,
                height: 241
            },
            scroll: {
                fx: 'directscroll'
            }
        });

        $("#paneThumb", this).carouFredSel({
            responsive: true,
            circular: false,
            infinite: false,
            auto: false,
            prev: '#prev',
            next: '#next',
            items: {
                visible: {
                    min: 2,
                    max: 5
                },
                width: 51,
                height: 42
            }
        });
        $('#paneThumb a', this).click(function () {
            $('#paneImg').trigger('slideTo', '#' + this.href.split('#').pop());
            $('#paneThumb a').removeClass('selected');
            $(this).addClass('selected');
            return false;
        });
    } else {
        $(this).find(".pane").stop(true, true).fadeOut(200, function () {
            $("#paneImg", this).trigger("destroy", true);
        });
    }
});