加载后Jquery效果消失

Jquery effect disappear after .load

本文关键字:消失 Jquery 加载      更新时间:2023-09-26

我正在使用此脚本为我的内容添加一些效果(翻转效果和选项卡)

 <script type="text/javascript" >
    $('document').ready(function () {
        $('#flip-container').quickFlip();
        $('#flip-navigation li a').each(function () {
            $(this).click(function () {
                $('#flip-navigation li').each(function () {
                    $(this).removeClass('selected');
                });
                $(this).parent().addClass('selected');
                var flipid = $(this).attr('id').substr(4);
                $('#flip-container').quickFlipper({}, flipid, 1);
                return false;
            });
        });
    });

然而,在.load(加载页面)之后,效果会消失,我的选项卡的所有内容都会显示出来。

这是我用来加载内容的代码:

 $(function () {
if (Modernizr.history) {
    var newHash = "",
        $mainContent = $("#main-content"),
        $pageWrap = $("#page-wrap"),
        baseHeight = 0,
        $el;
    $pageWrap.height($pageWrap.height());
    baseHeight = $pageWrap.height() - $mainContent.height();
    $("nav").delegate("a", "click", function () {
        _link = $(this).attr("href");
        history.pushState(null, null, _link);
        loadContent(_link);
        return false;
    });
    function loadContent(href) {
        $mainContent
                .find("#guts")
                .fadeOut(200, function () {
                    $mainContent.hide().load(href + " #guts", function () {

                        $mainContent.fadeIn(200, function () {
                            $pageWrap.animate({
                                height: baseHeight + $mainContent.height() + "px"
                            });
                        });
                        $("nav a").removeClass("current");
                        console.log(href);
                        $("nav a[href$=" + href + "]").addClass("current");

                    });
                });
    }
    $(window).bind('popstate', function () {
        _link = location.pathname.replace(/^.*['''/]/, ''); //get filename only
        loadContent(_link);
    });
} // otherwise, history is not supported, so nothing fancy here.

});

有没有办法不否定它们?有些主题使用了on()函数,但我真的不知道如何在这里使用它。如果可能的话,我希望它能在不需要事先点击的情况下工作。

这是该网站的链接。只有页面Acceluil和Semaine Prochaine可以工作。快速翻转用于第二个。在Acceluil上也应该有一些效果(比如这里),但效果只适用于第一次加载。

以下是更新的解决方案:

 function loadContent(href) {
        $mainContent
                .find("#guts")
                .fadeOut(200, function () {
                    $mainContent.hide().load(href + " #guts", function () {
                        $.getScript('js/jquery.quickflip.min.js', function () {
                            $('#flip-container').quickFlip();
                            $('#flip-navigation li a').each(function () {
                                $(this).click(function () {
                                    $('#flip-navigation li').each(function () {
                                        $(this).removeClass('selected');
                                    });
                                    $(this).parent().addClass('selected');
                                    var flipid = $(this).attr('id').substr(4);
                                    $('#flip-container').quickFlipper({}, flipid, 1);
                                    return false;
                                });
                            });
                        });
                        $.getScript('tablecloth/tablecloth.js', function () {
                            tablecloth();
                        });
                        $mainContent.fadeIn(200, function () {
                            $pageWrap.animate({
                                height: baseHeight + $mainContent.height() + "px"
                            });
                        });
                        $("nav a").removeClass("current");
                        console.log(href);
                        $("nav a[href$=" + href + "]").addClass("current");

                    });
                });
    }

我认为您需要在执行load的函数中添加代码,而不是在document.ready:

$('#result').load('ajax/test.html', function() {
    $('#flip-container').quickFlip();
        $('#flip-navigation li a').each(function () {
            $(this).click(function () {
                $('#flip-navigation li').each(function () {
                    $(this).removeClass('selected');
                });
                $(this).parent().addClass('selected');
                var flipid = $(this).attr('id').substr(4);
                $('#flip-container').quickFlipper({}, flipid, 1);
                return false;
            });
        });
    });
});

显然,线路$('#result').load('ajax/test.html', function()需要修改以匹配您对load的呼叫。

http://api.jquery.com/load/

原因是当您尝试连接quickFlip时,#flip-container不存在。在对load的调用完成并检索到要在上使用quickFlip的HTML之后,您必须调用$('#flip-container').quickFlip();

嘿,试试这个代码。。。

$( document ).ready(function() {
 $('#flip-container').quickFlip();
    $('#flip-navigation li a').each(function () {
        $(this).on("click",function () {
            $('#flip-navigation li').each(function () {
                $(this).removeClass('selected');
            });
            $(this).parent().addClass('selected');
            var flipid = $(this).attr('id').substr(4);
            $('#flip-container').quickFlipper({}, flipid, 1);
            return false;
        });
    });
});

我已经将click事件更改为on,如果您正在动态添加一些内容,它将对您有所帮助。