jQuery Drag and Drop Breaks When Loading Divs by AJAX

Question

I have a list of draggables that need to be dropped onto divs loaded by AJAX. However, when the divs are loaded by AJAX it breaks the droppables functionality. I removed AJAX from the equation and it worked fine.

Here's working code. With this code I can drag items in my .contentList to #block1 div and everything works peachy.

<div id="block1"></div>

$(".contentList").draggable();

var dropOpts = {
  hoverClass: "activated",
  tolerance: "pointer",
  drop: getURL
};

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

I then have the following code load a new div via jQuery .load.

    $(document).ready(function() {
    $("#template1").click(function() {
        $("#dynamic-ui").load("/templates/newtemplate.html");
    });

The newtemplate.html contains a div with the same id; #block1. However, once it loads I can no longer drag onto it. Any help would be greatly appreciated!

score 2 · Accepted Answer · edited May 12 '11 at 04:39

2

Add the code to make #block1 droppable after the newtemplate.html is loaded into dom. 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);        
    });
});

edited May 12 '11 at 04:39

RSK

17,210
13
54
74

answered May 12 '11 at 04:35

Rohit Singh Sengar

1,001
8
13

Hmmm. That didn't work for me. I'm playing around with the concept, and with live. – tabdon May 12 '11 at 15:55
Success! All I had to do was wrap your code in the .load call back function, and presto, working code. Good way to start the morning. I updated Rohit's code to reflect the solution. – tabdon May 12 '11 at 16:15

score 0 · Answer 2 · edited May 23 '17 at 11:45

0

The binding of events happens when the browser loads the webpage.
So during the loading if the JavaScript didn't find the specified division/element they won't bind the event. So for dynamically created divisions you need use jQuery live to bind the events.

For your question i think this question will answer you.

Hope it will help you. Good luck

edited May 23 '17 at 11:45

Community

1
1

answered May 12 '11 at 04:26

RSK

17,210
13
54
74

jQuery Drag and Drop Breaks When Loading Divs by AJAX

2 Answers2