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; ＃块1。然而，一旦它加载我不能再拖动它。任何帮助将不胜感激！

Answer 1

在newtemplate.html加载到dom之后添加代码以使＃block1 droppable。 e.g。

$(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会回答您。

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

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

2 个答案: