jQuery可拖拽功能不适用于通过ajax调用添加的元素。

Question

我有一个对象列表，我通过对话框进行更新。 当用户单击刷新按钮时，它会重新加载已更新的列表，并将相同的表格附加到该列表。 但是，当我重新加载更新的列表时，jQuery UI的可拖动函数停止工作。 我尝试在 ajax 成功处理程序中插入 $('draggable').draggable 行以及在 ajax 调用发生后插入该行，两者都没有成功。 当列表被刷新时，我还有一个 jquyer 的 live 事件处理程序来处理可拖动容器，但也没有起作用。

以下是我的代码，用于最初加载列表，用于可拖动容器的 live 函数以及当用户单击刷新按钮时的函数。 在我的下面代码中，我还尝试将 ui-draggable 类添加到对象中，但这并没有起作用：

$.ajax({
 async: false,
 type: 'POST',
 url: 'collection.php',
 success: function(data) {
    $("#collection").append(data);
 }
});


$("#refresh_collection").click(function(){
$("#collection").html("");
$.ajax({
     async: false,
     type: 'POST',
     url: 'collection.php',
     success: function(data) {
        $("#collection").append(data);
        $('.draggable_container:not(.ui-draggable)').live("mouseover",     function(){
            $(".draggable_container").addClass("ui-draggable");
        });
     }
});
});

$('.draggable_container').live('mouseover',function(){
$(this).draggable({
    cursor: "move",
    cursorAt: { top: -5, left: -5 },
    stop: function(){}
})
});

---

我使用on函数而不是live函数成功地使拖动元素工作了，但是现在我发现当我打开一个jquery UI对话框、关闭它，然后点击刷新按钮时，它们不能正常工作。如果我没有先打开对话框就直接点击刷新按钮，那么一切都正常。然而，如果我打开对话框、关闭它，然后点击刷新按钮，可拖动功能就会失效，但如果我只是打开对话框并关闭它而没有按刷新按钮，它就能正常工作。有没有什么方法可以解决这个问题？销毁可拖动对象然后在关闭对话框后重新初始化是否是解决方案？

最终，我希望在对话框关闭时执行Ajax调用，但是这段代码仍然无法工作。非常感谢任何帮助。

var $dialog = $("#upload_dialog").dialog({
autoOpen: false,
height: 375,
width: 500,
modal: false,
open: function() {
    $("body").draggable("destroy");
    $tab_title_input.focus();
},
close: function() {
    $.ajax({
         async: false,
         type: 'POST',
         url: 'collection.php',
         success: function(data) {
            $("#collection").html(data);
            $("body").on("mouseover", ".draggable_container", function(){
                $(".object_container").draggable({
                    cursor: "move",
                    cursorAt: { top: -5, left: -5 },
                    stop: function(){}
                })
            });
        }
    });
}
});

- jgille07

---

.live() 已经被长时间废弃（甚至不再支持），应该使用.on()。 - Simon

Answer 1

移除第一个 .live 调用，并将第二个 .live 调用更改为以下内容：

 $('body').on('mouseover', '.draggable_container',
    function(){ 
        $(this).draggable({ cursor: "move", cursorAt: { top: -5, left: -5 }, stop: function(){} }); 
});

- mccannf