可拖动的 jQuery UI 不适用于新创建的 DOM 元素

Posted 2023-05-08

【中文标题】可拖动的 jQuery UI 不适用于新创建的 DOM 元素

【英文标题】：jQuery UI draggable is not working on newly created DOM element

【发布时间】：2012-04-05 16:26:29

【问题描述】：

我有一些可以使用 jQuery UI 拖动的 DOM 元素。一切正常，但是当我使用 jQuery 创建一些元素时，它们根本不可拖动。即

$('div.draggable').draggable(); //Existing element , it works :)
$('p.draggable').draggable() ; //Newly created paragraph with same class name, it doesnt work at all :(

提前致谢！！！

我正在尝试这个：

<script type="text/javascript">
     $(document).ready(function()
         $('body').append('<p class="draggable">Newly Created Paragraph</p>');
         $('p.draggable').draggable(); **//This is not working**
     );
</script>

但不知何故，这是有效的

    <script type="text/javascript">
     $(document).ready(function()
         $('body').append('<p class="draggable">Newly Created Paragraph</p>')
                 .find('p.draggable').draggable(); **This is working**

     );
</script>

【问题讨论】：

尝试在$('p.draggable').draggable(); 之前和之后设置警报，然后看看哪个最先发生。也不会是$('body')？

【参考方案1】：

我知道这已经有一段时间了，但这个问题最近也困扰着我。正如其他人提到的，您必须在新创建的项目上重新运行.draggable()，但如果您在.draggable() 中定义了某些选项，这将不起作用。另外，将$().draggable() 放入一个函数中，然后在创建一个新元素后调用该函数（这个技巧确实适用于重置droppables - 看图）。

无论如何，长话短说 -> 将 $().draggable() 设置放入一个函数中，然后在创建新元素后调用该函数 DID WORK，但我不得不将它从 document ready 函数中取出.....之后我禁用了它，它起作用了。

您可以多次调用该函数，并且它会在每个创建的元素之后继续工作。看来如果它在document.ready 声明中，那么它是一枪交易..

希望对您有所帮助。

【参考方案2】：

你需要在新创建的元素插入 DOM 后调用 draggable()。

原因是第一行代码只匹配现有元素。第一行中没有选择新创建的元素。

【讨论】：

感谢您的努力，但我也尝试过，我将其保存在 $(document).ready() 中，并尝试在文档末尾写 <script></script>。就在</body> 标签之前，但它不起作用:(

我认为你做的不对。如何在 html/DOM 中插入新创建的段落？创建后，需要在该元素上调用 .draggable()。

【参考方案3】：

其实draggable好像有问题。当您附加一些 htmlTag 然后尝试找到它并使其可拖动时，它无法识别它。尝试使用createElement 创建一个新元素，然后附加它。希望有效

var newEle = document.createElement('p');
$(newEle).attr("class","draggable").draggable();
$('body').append($(newEle));

或

var newEle = document.createElement('p');
$(newEle).attr("class","draggable");
$('body').append($(newEle));
$('p.draggable').draggable();

【讨论】：

感谢您的耐心和努力，但仍然没有运气的尝试:(

我认为$('p.draggable') 选择了所有具有类'draggable' 的'p' 元素，draggable() 一旦应用于一个元素就不会再次应用，而是先前应用的可拖动元素也被破坏了。在任何元素上尝试.draggable().draggable()，然后你就可以看到了。但是，如果您在追加自身之前应用 draggable 然后追加，它只会将 draggable() 应用到该元素并且也只应用一次。

【参考方案4】：

我遇到了这个问题，但是在阅读了这个之后我可以解决它。所以你必须在构建新元素后再次调用 draggable() 方法，这是我的代码：

$(".in-browser").each(function()
        $(this).dblclick(function()
            var browseIn = $(this).data("href");
            var browserHTML = '<div class="browser draggable">\
        <ul class="browser-buttons">\
            <li>_   \
            <li>#   \
            <li>x   \
        </ul>\
        <div class="browser-win-container">\
        <div class="addressbar"></div>\
        <iframe class="opening-window" src="'+browseIn+'"></iframe>\
    </div>\
    </div>';
            $("body").append(browserHTML);
            $(".draggable").draggable(); //look at here
        );
    );

【参考方案5】：

每次调用事件动作时都应该调用 draggable() 函数：

$('body').on('click', '.add-new-table', function () 
 $( ".canvas" ).prepend('<div class="ui-widget-content draggable"><p>Drag me</p></div>');
 $(function()
   $(".draggable" ).draggable(
     containment: "parent"  
   );
 );
);

【参考方案6】：

您必须在新创建的对象的实例上应用可拖动对象， 重写代码：

<script type="text/javascript">
 $(document).ready(function()
    var newElement = '<p class="draggable">Newly Created Paragraph</p>';
    $('body').append(newElement);
    newElement.draggable(); **//This is working**
 );

它现在应该可以工作了。

【参考方案7】：

新元素制作完成后，您可以使用 setTimeout 调用可拖动函数。

$('div').click(function()
 $('body').append('<div class="box"></div>');
 setTimeout(function() 
  $('div.box').draggable(
   drag: function( event, ui ) ,
   cursor:'-webkit-grabbing'
  );
 ,1000);
)

【讨论】：

为什么要使用setTimeout？其他更老的解决方案在没有它的情况下也可以工作

【参考方案8】：

$(document).on("mouseenter", ".item", () => 
     $('.item').draggable(); ); 

它的工作，因为拖动事件触发 mouseenter

【讨论】：

您好，欢迎来到 Stack Overflow！请拨打tour。感谢您的回答，但您是否还可以添加有关您的代码如何解决问题的解释？查看help center 获取有关如何格式化代码的信息。