通过 AJAX 加载 div 时 jQuery 拖放中断

Posted 2023-05-08

【中文标题】通过 AJAX 加载 div 时 jQuery 拖放中断

【英文标题】：jQuery Drag and Drop Breaks When Loading Divs by AJAX

【发布时间】：2011-08-23 19:31:57

【问题描述】：

我有一个需要拖放到 AJAX 加载的 div 上的可拖动列表。但是，当 AJAX 加载 div 时，它会破坏 droppables 功能。我从等式中删除了 AJAX，它运行良好。

这是工作代码。使用此代码，我可以将 .contentList 中的项目拖动到#block1 div，一切正常。

<div id="block1"></div>

$(".contentList").draggable();

var dropOpts = 
  hoverClass: "activated",
  tolerance: "pointer",
  drop: getURL
;

$("#block1").droppable(dropOpts);

然后我让下面的代码通过 jQuery .load 加载一个新的 div。

    $(document).ready(function() 
    $("#template1").click(function() 
        $("#dynamic-ui").load("/templates/newtemplate.html");
    );

newtemplate.html 包含一个具有相同 id 的 div； #block1。但是，一旦加载，我就不能再拖到它上面了。任何帮助将不胜感激！

【参考方案1】：

在将 newtemplate.html 加载到 dom 后，添加代码以使 #block1 可放置。例如

$(document).ready(function() 
    $("#template1").click(function() 
        $("#dynamic-ui").load("/templates/newtemplate.html");
        var dropOpts = 
            hoverClass: "activated",
            tolerance: "pointer",
            drop: getURL
        ;

        $("#block1").droppable(dropOpts);        
    );
);

【讨论】：

嗯。那对我不起作用。我正在玩弄这个概念和现场直播。

成功！我所要做的就是将您的代码包装在 .load 回调函数中，然后将其放入工作代码中。早上开始的好方法。我更新了 Rohit 的代码以反映解决方案。

【参考方案2】：

事件的绑定发生在浏览器加载网页时。 因此，在加载过程中，如果 javascript 没有找到指定的分区/元素，它们将不会绑定事件。因此，对于动态创建的部门，您需要使用jQuery live 来绑定事件。

对于你的问题，我想this question 会回答你的。

希望对您有所帮助。 祝你好运