Jquery ui jQuery UI Dragable只能在ajax调用后工作

我对jQuery可拖动UI有一个非常简单的问题。我键入了一个函数，它的名字是inid_drag，当我在ajax之后调用它时，它工作良好。但是当在ajax调用之前键入时，它就不起作用了

init_drag();

遵循可拖动设备的代码：

function init_drag(){

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

init_drag();

以下代码工作正常：

        $("#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();
                }
            });
        });

init_drag();

$（“#classID”）.change（函数（）{
var classID=$（this.val（）；
$.ajax({
async:false，
类型：“POST”，
数据类型：“json”，
数据：“classID=“+classID，
url:“views/timeTablesAjax.php”，
成功：功能（数据）{
$（“#lessonTeacher”）.html（“”）；
$（“#时间表”）.hide（）；
美元（“#时间表”）。显示（“慢”）；
$（“#时间表td”）.not（“.notDrop”）.html（“”）；
$。每个（数据、功能（i、人员）{
$（“#lessonTeacher”）。追加（“+persons[0]。代码+”
）；
对于（变量i=0；i）+
“
“+persons[i].staff+”
”+
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/>");
                        }
                    });
                }
            });
        });

init_drag();

$（“#classID”）.change（函数（）{
var classID=$（this.val（）；
//在这个函数中有可拖动的代码。
初始化拖动（）；
$.ajax({
async:false，
类型：“POST”，
数据类型：“json”，
数据：“classID=“+classID，
url:“views/timeTablesAjax.php”，
成功：功能（数据）{
$（“#lessonTeacher”）.html（“”）；
$（“#时间表”）.hide（）；
美元（“#时间表”）。显示（“慢”）；
$（“#时间表td”）.not（“.notDrop”）.html（“”）；
$。每个（数据、功能（i、人员）{
$（“#lessonTeacher”）。追加（“+persons[0]。代码+”
）；
对于（变量i=0；i）+
“
“+persons[i].staff+”
”+
init_drag();

“

”；
}
});
}
});
});

当您调用

$（“#classID”）.change（function（）{}

它执行

init_drag();

和ajax方法 同时，但在response中，ajax比init_drag（）方法花费更多的时间

---

因此，当您使用ajax获得回复时，html或拖动函数会重叠您的html，因为您附加了html。

尝试init\u drag（）；方法成功..block是的，但为什么不在ajax调用之前工作？我想了解这一点。成功后，每个循环代码都正常工作，但在每个循环之前都不工作。因为不创建元素（不存在）对于draggable。那么如何修复这个问题来处理任何时间可拖动的元素。如果创建或未创建。解决了我的问题，代码：$（项）。appendTo（“#lessonTeacher”）。draggable（{helper:'clone'}）；项是新附加的项。我认为只有这样才能解决这些事件问题。是的，您应该在创建html后初始化“$（项）。appendTo（#lessonTeacher”）。draggable（{helper:'clone'}）”

init_drag();