Question

我正在使用jQuery draggable 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" 
    });
});

$。发布：

$( 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 - 在使用draggable之前必须点击一次页面吗？

1 个答案: