jquery-ui - 通过 AJAX 加载 Div 时 jQuery 拖放中断

Question

我有一个可拖动列表，需要将其拖放到 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； # block 1。但是，一旦加载，我就无法再拖动它了。任何帮助将不胜感激!

Answer 1

添加代码，使 #block1 在 newtemplate.html 加载到 dom 后可删除。例如

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

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