$(document).on - 在使用可拖动功能之前必须单击页面一次吗？

Question

我正在使用 jQuery 可拖动 UI 并且它按预期工作。但是，我正在使用 AJAX 调用来清空容器 div 并附加新的可拖动 div。

而不是使用 $('.draggableselector').draggable({}); 我正在使用 $(document).on('click', '.draggableselector' function () { });

但这样做的结果是我必须单击一次文档才能拖动。

有没有一种方法可以在 .append() 的同时重新添加监听器，这样就不需要额外的点击了？

//New
$(document).on('click', '.plrobj', function() {
    $( ".plrobj" ).draggable({

        stack: ".plrobj",
        distance: 0,
        revert: "invalid", 
        opacity: 0.5, 
        helper: "clone" 
    });
});

//Original
$(function() {
    $( ".plrobj" ).draggable({

        stack: ".plrobj",
        distance: 0,
        revert: "invalid", 
        opacity: 0.5, 
        helper: "clone" 
    });
});

$.post :

$( function() {
    $(".Selection").click(function(){
        var SelectedVar = $(this).attr('value');

        function Update() {
                var Formation = SelectedVar;
                $.post("PitchExternalProcessing.php", { data: $('Form').serialize()},
                        function (result) {
                        var returnedHTML = JSON.parse(result);
                        $(".mainbox > .childbox").empty();
                        $(".mainbox").append(returnedHTML[0]);
                        $(".siblingbox").empty();
                        $(".siblingbox").append(returnedHTML[1]);
                        }
                );
        }
        Update();
    });

注意： 为简单起见，我删除了一大块代码，包括 droppable 元素，但我事先对其进行了测试，它仍然具有相同的结果操作。

Answer 1

试试这样的东西：

//Original
$(function() {
  function initDraggables($elements){
    $elements.draggable({
        stack: ".plrobj",
        distance: 0,
        revert: "invalid", 
        opacity: 0.5, 
        helper: "clone" 
    });
  }
 initDraggables( $(".plrobj") );
});

当您的 ajax 调用完成时，调用 initDraggables() 并将新创建的元素传递给它。这将避免重新初始化已经可拖动的元素

$(document).on - 在使用可拖动功能之前必须单击页面一次吗？

$(document).on - Must click page once before it works with draggable?

jquery

jquery-ui

jquery-ui-draggable