jQuery UI Draggable只能在ajax調用後才能工作

Question

我有jQuery可拖動UI的非常容易的問題。我輸入一個函數，它的名字是inid_drag，當我在ajax之後稱其工作正常。但是在ajax調用之前鍵入它不起作用。

用於拖動跟蹤代碼：

function init_drag(){ 

    $("#lessonTeacher li").draggable({ 
     helper: 'clone' 
    }); 
} 

跟蹤代碼工作正常：

 $("#classID").change(function(){ 
       var classID = $(this).val(); 

      $.ajax({ 
       async: false, 
       type: "POST", 
       dataType: "json", 
       data:"classID=" + classID, 
       url: "views/timeTablesAjax.php", 

       success:function(data){ 

        $("#lessonTeacher").html(""); 

        $("#timeTable").hide(); 
        $("#timeTable").show("slow"); 

        $("#timeTable td").not(".notDrop").html(""); 

        $.each(data,function(i,persons){ 

         $("#lessonTeacher").append("<b>" + persons[0].code + "</b><br/>"); 
         for(var i = 0; i < persons.length; i++){ 

          $("#lessonTeacher").append("<li class='token-input-token-facebook' style='list-style-type: none;'>" + 
           "<p style='padding-left: 10%;' data-id=" + persons[i].ID + ">" + persons[i].staff + "</p>" + 
           "<span class='infoBox' style='background-color: #808080;'><img src='BT/upload/info.ico' width=10 height=10></span></li><br/><br/>"); 
         } 
        }); 
        // in this function has got draggable codes. 
        init_drag(); 
       } 
      }); 
     }); 

關注的代碼不工作：

 $("#classID").change(function(){ 
       var classID = $(this).val(); 
        // in this function has got draggable codes. 
        init_drag(); 

      $.ajax({ 
       async: false, 
       type: "POST", 
       dataType: "json", 
       data:"classID=" + classID, 
       url: "views/timeTablesAjax.php", 

       success:function(data){ 

        $("#lessonTeacher").html(""); 

        $("#timeTable").hide(); 
        $("#timeTable").show("slow"); 

        $("#timeTable td").not(".notDrop").html(""); 

        $.each(data,function(i,persons){ 

         $("#lessonTeacher").append("<b>" + persons[0].code + "</b><br/>"); 
         for(var i = 0; i < persons.length; i++){ 

          $("#lessonTeacher").append("<li class='token-input-token-facebook' style='list-style-type: none;'>" + 
           "<p style='padding-left: 10%;' data-id=" + persons[i].ID + ">" + persons[i].staff + "</p>" + 
           "<span class='infoBox' style='background-color: #808080;'><img src='BT/upload/info.ico' width=10 height=10></span></li><br/><br/>"); 
         } 
        }); 
       } 
      }); 
     }); 

Answer 1

當你調用$("#classID").change(function(){} 它執行

init_drag(); 

和Ajax方法 同一時間但在性反應的AJAX需要更多的時間，那麼你的init_drag（）方法 所以當你得到了與阿賈克斯的HTML或拖拽功能重疊烏爾HTML，因爲你追加的HTML回覆。