4

我有一个要通过对话框更新的对象列表。当用户单击刷新按钮时，它会重新加载更新的列表并将同一个表附加到列表中。但是，当我重新加载更新的列表时，jQuery UI 的可拖动功能停止工作。我尝试在 ajax 成功处理程序中和发生 ajax 调用之后插入 $('draggable').draggable 行，但均未成功。我还有一个用于可拖动容器的 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 函数而不是实时使可拖动对象工作，但现在我意识到在打开 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(){}
                })
            });
        }
    });
}
});
4

1 回答 1

5

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

 $('body').on('mouseover', '.draggable_container',
    function(){ 
        $(this).draggable({ cursor: "move", cursorAt: { top: -5, left: -5 }, stop: function(){} }); 
});
于 2013-01-31T18:08:11.067 回答