jQuery可拖動不適用於通過ajax調用添加的元素

我有一個對象列表，通過對話框進行更新。當用戶點擊刷新按鈕時，它會重新載入更新後的列表，並在列表中追加同一個表格。但是，當我重新加載更新列表時，jQuery UI的可拖動功能停止工作。我試圖在ajax成功處理程序中插入$（'draggable'）。draggable行，並且在發生ajax調用之後，它們都不起作用。我還有一個jquyer活動事件處理程序，用於可拖動容器，當列表刷新時不起作用。jQuery可拖動不適用於通過ajax調用添加的元素

下面是我最初加載列表的代碼，可拖動容器的實時函數以及用戶單擊刷新按鈕時的函數。在我的代碼下面我也試圖與UI可拖動類添加到對象，並沒有工作：

$.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(){} 
}) 
});

我能得到的拖拽元素的功能使用，而不是爲工作而生活，但現在我意識到，他們不工作後，我打開一個jQuery UI對話框，關閉它，然後單擊刷新按鈕。如果我只是點擊刷新按鈕而不先打開對話框，那麼一切正常。但是，如果我打開對話框，關閉它，然後單擊刷新按鈕，可拖動關閉，但如果我只是打開對話框並關閉它，而不按刷新按鈕，則它可以正常工作。有想法該怎麼解決這個嗎？如果我關閉對話框的聲音就像解決方案一樣，將銷燬可拖動並重新初始化它？

我最終希望在對話框關閉時發生ajax調用，但此代碼仍然無法工作。任何幫助將大大appreaciated。

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(){} 
       }) 
      }); 
     } 
    }); 
} 
});

來源

2013-01-31 jgille07

.live（）是很長很長棄用（想過沒有，甚至不再支持），應該使用[。對（）]（http://api.jquery.com/on/） – Simon

刪除第一個.live呼叫和第二.live調用更改爲以下：

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

來源

2013-01-31 18:08:11 mccannf

jQuery可拖動不適用於通過ajax調用添加的元素

回答

相關問題