Question

我有一个对象列表，我通过对话框更新。当用户单击刷新按钮时，它会重新加载更新的列表并将相同的表附加到列表中。但是，当我重新加载更新的列表时，jQuery UI的可拖动功能停止工作。我已经尝试在ajax成功处理程序中插入$（'draggable'）。draggable行，并且在ajax调用发生之后，并且都没有工作。我还有一个用于可拖动容器的jquyer实时事件处理程序，这些处理程序在刷新列表时不起作用。

下面是我最初加载列表的代码，可拖动容器的实时函数以及用户单击刷新按钮时的函数。在我的下面的代码中，我还尝试将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来使draggables工作，但现在我意识到在我打开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(){}
                })
            });
        }
    });
}
});

Answer 1

删除第一个.live来电并将第二个.live来电更改为以下内容：

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

jQuery draggable不适用于通过ajax调用添加的元素

1 个答案: