當AJAX加載Div時的jQuery拖放中斷

我有一個需要拖放到由AJAX加載的div上的可拖動列表。但是，當div由AJAX加載時，它會破壞droppables功能。我從等式中刪除了AJAX，它工作正常。當AJAX加載Div時的jQuery拖放中斷

這裏是工作代碼。有了這段代碼，我可以將我的.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。但是，一旦它加載，我不能再拖到它上面。任何幫助將不勝感激！

來源

2011-05-12 tabdon

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

來源

2011-05-12 04:35:41

感謝RSK的正確格式化。 – 2011-05-12 04:41:16

不用客氣;） – RSK 2011-05-12 04:42:30

嗯。這對我沒有用。我正在玩這個概念，並與現場直播。 – tabdon 2011-05-12 15:55:52

事件的綁定發生在瀏覽器加載網頁時。
因此，在加載過程中，如果JavaScript未找到指定的分區/元素，它們將不會綁定該事件。所以對於動態創建的部門，您需要使用jQuery live來綁定事件。

對於你的問題，我認爲this question會回答你。

希望它能幫助你。祝你好運

來源

2011-05-12 04:26:19 RSK

當AJAX加載Div時的jQuery拖放中斷

回答

相關問題