Question

我很容易遇到jQuery draggable 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（）方法所以当你用ajax回复html或拖动函数重叠ur html因为你追加html。

jQuery UI Draggable仅在ajax调用后才能工作

1 个答案: