如何在将通过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 
    } 
});