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

【问题标题】：jQuery Drag and Drop Breaks When Loading Divs by AJAX通过 AJAX 加载 div 时 jQuery 拖放中断
【发布时间】：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。但是，一旦加载，我就不能再拖到它上面了。任何帮助将不胜感激！

【问题讨论】：

标签： jquery-ui jquery

【解决方案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 会回答你的。

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

【讨论】：