4

ダイアログを介して更新しているオブジェクトのリストがあります。ユーザーが更新ボタンをクリックすると、更新されたリストが再読み込みされ、同じテーブルがリストに追加されます。ただし、更新されたリストをリロードすると、jQuery UI のドラッグ可能な機能が機能しなくなります。$('draggable').draggable 行を ajax 成功ハンドラー内と ajax 呼び出しの後に挿入しようとしましたが、どちらも機能しませんでした。また、リストが更新されたときに機能しなかったドラッグ可能なコンテナー用の jqueyer ライブ イベント ハンドラーもあります。

以下は、リストを最初にロードするためのコード、ドラッグ可能なコンテナーのライブ関数、およびユーザーが更新ボタンをクリックしたときの関数です。以下のコードでは、オブジェクトに 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、2 番目の.live呼び出しを次のように変更します。

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