超级简单滑块在AJAX加载后无法正常工作

时间:2015-08-28 00:49:14

标签: javascript jquery ajax

我试图在用户点击#mail-wrap之后触发就绪事件,该事件使用AJAX加载到另一个页面中,以便sss()可以被激活。但是,它没有重新开始。我做错了什么?

jQuery(document).ready(function($) {

    function sss() {
        $(document).trigger('ready');
        $('.slider').sss({
            speed: 5000
        });
    }

    // User event
    $('#mail-wrap').on('click', function(e) {
        e.preventDefault();

        sss();
    });

    $('.slider').sss({
        speed: 5000
    });

});

完整的相关代码(代码被document ready包围,sss()函数在其外部):

(function($) {

    var contactButton = $('#contact-button');

    // Load the Contact page
    function loadContact() {
        $('#content').fadeOut(50, function() {
            $('<span class="loading-icon page-loading-icon"></span>').insertBefore('#content');
        }).load(site.url + '/contact/ #contact-keebs', function() {
            $('.page-loading-icon').remove();
            $(this).fadeIn(50);
            $('body').addClass('contact');
            $('#projects-list').removeClass('fadeInUp');
            $('#contact-info, #clients').addClass('fadeInUp');
        });

        // Change the Contact button to 'Projects'
        $(contactButton).removeClass('contact-button').addClass('project-button').attr('data-title', 'Projects').css('width', '71px').text('Projects').shuffleLetters();
        myIcons.to('work');

        // Change the title of the document
        $('head').find('title').text('Contact | Keebs');

        //Reinitialize SSS
        sssInit();
    }

    // Load the Projects page
    function loadProjects() {
        $('#content').fadeOut(50, function() {
            $('<span class="loading-icon page-loading-icon"></span>').insertBefore('#content');
        }).load(site.url + '/ #primary', function() {
            $('.page-loading-icon').remove();
            $(this).fadeIn(50);
            $('body').removeClass('contact');
            $('#contact-info, #clients').removeClass('fadeInUp');
            $('#projects-list').addClass('fadeInUp');
            TweenLite.to("body.single #project-wrapper", 0.3, {height:0, force3D:true, ease:Power4.easeOut});
        });

        // Change the Projects button to 'Contact'
        $(contactButton).removeClass('project-button').addClass('contact-button').attr('data-title', 'Get in touch').css('width', '96px').text('Get in touch').shuffleLetters();
        myIcons.to('mail');

        // Change the title of the document
        $('head').find('title').text(site.title);
    }

    // User event
    $('#mail-wrap').on('click', function(e) {
        e.preventDefault();

        // Prevent accidental double clicks
        if (!$(this).data('isClicked')) {
            var link = $(this);

            if (!contactButton.hasClass('project-button')) {
                var data1 = { contact_page: site.url + '/contact/ #contact-keebs' };
                History.pushState(data1, 'Contact | Keebs', site.url + '/contact/');
                loadContact();

            } else {
                var data2 = { home_page_contact: site.url + '/ #primary' };
                History.pushState(data2, site.title, site.url + '/');
                loadProjects();

            }

            link.data('isClicked', true);
            setTimeout(function() {
                link.removeData('isClicked');
            }, 500);
        }

    });

})(jQuery);

1 个答案:

答案 0 :(得分:0)

  

在用户点击#mail-wrap后尝试触发就绪事件   使用AJAX加载到另一个页面中,以便可以重新激活sss()。

     

然而,它并没有重新开始。我做错了什么?

<script type="text/javascript"> ShopifyApp.ready(function(){ ShopifyApp.Bar.initialize({ title: "Groupie", icon: "<%= asset_path('favicon.ico') %>" }); }); </script> 调用时已经调用

.ready()

尝试使用$(document).trigger('ready');

$.holdReady()

如,

&#13;
&#13;
// do stuff before `.ready()` event called
$.holdReady(true);
// User event
$('#mail-wrap').on('click', function(e) {
    e.preventDefault();   
    sss();
    // call `.ready()` event by setting `$.holdReady()` to `false`
    $.holdReady(false);
});

function sss() {
    jQuery('.slider').sss({
        speed: 5000
    });
}

jQuery(document).ready(sss);
&#13;
$.holdReady(true);
// User event
$('#mail-wrap').on('click', function(e) {
  e.preventDefault();
  sss("$.holdReady(true) within `click` event", this);
  $.holdReady(false);
});

function sss() {
  console.log(arguments[1]); // `#mail-wrap` , `document`
  $("body").append("<br>" + arguments[0] + " " + $.now())
}

jQuery(document).ready(function($) {
  sss("$.holdReady(false) within $(document).ready()", this)
});
&#13;
&#13;
&#13;