0

我对 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/>");
                        }
                    });
                }
            });
        });
4

1 回答 1

1

当你调用 $("#classID").change(function(){} 它时执行 

init_drag();

和 ajax 方法同时使用，但响应 ajax 需要更多时间然后你的 init_drag() 方法所以当你用 ajax 回复时 html 或拖动函数与你的 html 重叠，因为你附加了 html。

于 2013-07-18T06:50:54.543 回答