-1

そこで、Jquery Drag/Drop を使用して何かをダッシュ​​ボードにドラッグ アンド ドロップしています。ダッシュボードにドロップしたものをダッシュ​​ボードの外にドラッグして、それを破棄/ダッシュボードから削除したいと考えています。

ダッシュボードにドロップされたものにクラスを追加してから、それにドラッグ可能なものを追加しようとしましたが、ドラッグが機能していません。ダッシュボードに要素を追加すると、ダッシュボードの後ろに表示されるためだと思います(少し色が薄くなっています。）

これが私のコードです-

    $(".draggable").draggable({helper:'clone'});
    $("#favouritesDashboard").droppable({
        accept:".draggable",
        drop: function(event,ui) {
            var toDrop = $(ui.draggable).clone();
            //create smaller version
            $(toDrop).addClass("inDashBoard");

            $(this).append(toDrop);
        }
    });
   $(".inDashBoard").click(function(){
    console.log("clicking elem in dashboard");
   });

2 番目のドラッグ可能なものをクリックに置き換えました。console.log は印刷されません。これは、私が考えていることが実際に起こっていることを示唆しています。

4

3 に答える 3

0

これは、jQueryのイベントバインディング/リスナーの性質によるものです。

クリックイベントをトリガーする要素は、ページが読み込まれるときに存在せず、動的に追加されます。したがって、メソッドがセレクターに一致する新しい要素に確実にアタッチされるようにするには、「on」または「live」を使用する必要があります

$(".inDashBoard").on( "click", function(){
   console.log("clicking elem in dashboard");
});
于 2012-11-20T23:05:23.550 に答える
0

遅延バインディングhttp://api.jquery.com/on/に on を使用します。

$(document).on('click', '.inDashBoard', function(){
    console.log("clicking elem in dashboard");
});
于 2012-11-20T23:11:07.917 に答える
0

これはうまくいくはずです：

$(".inDashBoard").live('click', function(){
    console.log("clicking elem in dashboard");
});
于 2012-11-20T23:30:37.507 に答える