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

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
  }
});