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

Question

我有一个需要放到由AJAX加载的div上的可拖动对象的列表。但是，当由AJAX加载div时，它会破坏droppables功能。我从方程式中删除了AJAX，它工作得很好。

下面是可用的代码。有了这段代码，我可以将.contentList中的项目拖到#Block1div中，一切都会正常工作。

<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。然而，一旦它加载，我就不能再拖到它上面了。任何帮助都将不胜感激！

Answer 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);        
    });
});

Answer 2

事件的绑定在浏览器加载网页时发生。

因此，在加载过程中，如果JavaScript没有找到指定的分区/元素，它们就不会绑定事件。因此，对于动态创建的分区，您需要使用jQuery live来绑定事件。

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

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