2013-07-18 68 views
0

我有jQuery可拖動UI的非常容易的問題。我輸入一個函數,它的名字是inid_drag,當我在ajax之後稱其工作正常。但是在ajax調用之前鍵入它不起作用。jQuery UI Draggable只能在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/>"); 
         } 
        }); 
       } 
      }); 
     }); 
+0

嘗試init_drag(); 方法在成功..塊 –

+0

是的,這是工作,但爲什麼不工作之前Ajax調用?我想學習這個。 – Mesuti

回答

1

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

init_drag(); 

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

+0

成功之後,每個循環代碼都能正常工作,但在每個循環之前都不工作。因爲不會爲可拖動的元素創建元素(不存在)。所以如何解決這個問題來處理任何可拖動的元素。如果已創建或未創建。 – Mesuti

+0

解決我的問題代碼: $(item).appendTo(「#lessonTeacher」)。draggable({helper:'clone'}); 項目是新添加的項目。只有通過這種方式才能解決事件問題。 – Mesuti

+0

yes你應該在創建html之後使用'$(item).appendTo(「#lessonTeacher」)。draggable({helper:'clone'})'' –

相關問題