Question

通过以下代码触发Sequence.js：

$(document).ready(function(){
    var options = {
        autoPlay: false,
        nextButton: true,
        prevButton: true
    };

    var sequence = $("#sequence").sequence(options).data("sequence");
})

显然，最后一行确定了DOM元素。但是，我正在创建一个通过AJAX加载#sequence的页面。因此，在运行上述代码时它不存在。

我已经查看了.on（），但无法弄清楚如何将其应用于此场景。

完整代码：

$(document).ready(function() {

    $("a:not([href^='http://'])").click(function(e){

        $('html,body').animate({
            scrollTop: $("#bigNames").offset().top
        }, 1500);


        var url = $(this).attr("href") + " #cont";

        $('#subContent').fadeOut('slow', function() {

            $('#subContent').load(url, function() {


                var contentHeight = $("#subContent").height();

                $('#bodyContent').animate({
                    height: contentHeight
                }, 'slow', function() {
                    $('#subContent').delay(800).fadeIn('slow');

                }); // close animate

                var options = {
                    autoPlay: false,
                    nextButton: true,
                    prevButton: true
                };


                var sequence = $("#sequence").sequence(options).data("sequence");
            }); // close load
        }); // close fadeout

        return false;
    }); 

    $.waypoints.settings.scrollThrottle = 30;

    $('#chad').waypoint({
       offset: 50
    });

    $('#bigNames').waypoint({
       offset: 5
    });

    $('#chad').waypoint(function(event, direction) {
        if (direction === 'down') {
            $('#smallNames').animate({"opacity": "0"}, 500);
        }
        else {
            $('#smallNames').animate({"opacity": "1"}, 300);
        }
    });



    $('#bigNames').waypoint(function(event, direction) {
        if (direction === 'down') {
            $('#main').css("position", "fixed");
            $('#main').addClass("afixed");
            /* $('#main .span12').animate({"height" : "420"}, "slow", function() { */


                $(this).append('<ul id="subDateAndLoc"><li id="subDate">July 13, 2013</li><li id="subLoc">Greensburg, PA</li></ul>');
                $('#subDateAndLoc').fadeIn("slow");
            /* }); 
            $('#nav').animate({"top" : "112"}, "slow"); */

            $('#bodyContent').css("marginTop", "355px");

        }
        else {
            $('#main').css("position", "relative");
            $('#main').removeClass("afixed");
            /* $('#main .span12').animate({"height" : "500"}, "slow");
            $('#nav').animate({"top" : "160"}, "slow"); */
            $('#bodyContent').css("marginTop", "0px");
            $('#subDateAndLoc').fadeOut("500");
            event.stopPropagation();
        }
    });







});

Answer 1

您应该在ajax方法中执行success回调函数。例如：

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
      // activate your plugin here
  }
});

如何在将通过AJAX加载的DOM元素上启动jQuery插件（sequence.js）？

1 个答案: