javascript执行顺序问题

Question

    <ul id="shopping_list"></ul>
    <div id="shopping_list_pre"></div>
   <div id="shopping_list_counter"></div>
    <script type="text/javascript"> 
    var flag=0;
    var i=0;
    var title;
$.ajax({
    url: "showNewsAction.action",
    type:'jsonp',
    success: function(msg){
for(i=0;i<msg.toString().length;i++){
      $("#shopping_list").append("<li><a href="+"http://localhost:8080/HCF/showNews.jsp?id="
      +msg.news[i].id
      +">"
      +i
      +msg.news[i].id
      +msg.news[i].title
      +msg.news[i].author
      +msg.news[i].date.toString()
      +"</a></li>");
      }
}
});
</script><script type="text/javascript">
//第二段javascript代码
$("#shopping_list li").quickpaginate({ perpage:10, pager : $("#shopping_list_counter") });
</script>
问题是这样的，这是一个分页的插件。
正常的，应该是ajax请求回来的数据填充到页面上之后，再调用第二段javascript代码，产生分页的那些按钮。可是现在javascript的执行顺序是这样的，先执行了第二段代码，可是呢，#shopping_list li 这个选择器jquery是找不到的，于是这段没有成功执行，也就不能产生分页的按钮了。请问，如何做，才能让ajax请求回来的数据填充到页面上之后，产生了li标签之后，再调用第二段javascript代码。

Answer 1

楼主可以使用JQuery的liveQuery就是页面上动态调入的节点也能遍历，好像javascript的事件是在页面加载完成后注册的，动态生成的几点虽然拥有相同的class，但是它依然没有注册事件的，所以你可以上网查查JQuery 的liveQuery，因为做后台的，但是之前好像遇到过，所以略懂，具体操作楼主上网差，我只能说一下原理吧

Answer 2

$(document).ready(function(){
    //第一段代码
    one(); //call the initial method
});function one(){
    //第二段代码
    two(); //call two() on callback
}function two(){
    //第二段代码
    three(); //call three() on callback
}依次类推

Answer 3

把第二段代码放到ajax回调函数里调用就OK了.

Answer 4

ajax是异步的，有2个解决方法，第二段代码放到回调函数里
<script type="text/javascript"> 
    var flag=0;
    var i=0;
    var title;
    $.ajax({
           url: "showNewsAction.action",
           type:'jsonp',
           success: function(msg){
            for(i=0;i<msg.toString().length;i++){
                 $("#shopping_list").append("<li><a href="+"http://localhost:8080/HCF/showNews.jsp?id="
                     +msg.news[i].id
                     +">"
                     +i
                     +msg.news[i].id
                     +msg.news[i].title
                     +msg.news[i].author
                     +msg.news[i].date.toString()
                     +"</a></li>");
             }
        }
$("#shopping_list li").quickpaginate({ perpage:10, pager : $("#shopping_list_counter") });
    });
第二种就是将ajax设置成同步<script type="text/javascript"> 
    var flag=0;
    var i=0;
    var title;
    $.ajax({
           url: "showNewsAction.action",
           type:'jsonp',
           async: false,
           success: function(msg){
            for(i=0;i<msg.toString().length;i++){
                 $("#shopping_list").append("<li><a href="+"http://localhost:8080/HCF/showNews.jsp?id="
                     +msg.news[i].id
                     +">"
                     +i
                     +msg.news[i].id
                     +msg.news[i].title
                     +msg.news[i].author
                     +msg.news[i].date.toString()
                     +"</a></li>");
             }
        }
    });

Answer 5

1.把 第二段函数放到 第一段函数的 success()函数里，
2.把ajax改成 同步的，增加参数 async: false,ajax默认调用是异步的，也就是说你在调用 
$.ajax({...}）后，第二段代码就执行了，但这时 ajax请求可能还没有返回值，