Make dynamically added DIVs inaccessible?

Question

I'm having a problem adding a dynamically added div for my drag and drop operations. If someone could study this script http://jsfiddle.net/dgobrien123/FvG2J/embedded/result/ and maybe help me find my error.

In the finished document method, this is the way to use droppable:

$(".droppable").droppable({ activeClass: 'dragactive', hoverClass: 'drophover', drop: function(event, ui) { alert( this.id ); $(this).addClass('drophighlight').find('p').text( '' + ui.draggable.children("span").text() + ''); } }); 

Here's how the container is added:

  function addGroup() { counter = counter + 1; $("div#pcgroups").append("<div class='dropcontainer'><div class='droppable' id='GROUP" + counter + "'><p>PC GROUP #" + counter + "</p></div></div>"); return counter; } 

Answer 1

The problem you are facing is that you apply droppable before creating your elements. You can apply it the way they are created in your addGroup () method:

 function addGroup() { counter = counter + 1; var x = $("<div class='dropcontainer'><div class='droppable' id='GROUP" + counter + "'><p>PC GROUP #" + counter + "</p></div></div>"); $("div#pcgroups").append(x); x.droppable({ activeClass: 'dragactive', hoverClass: 'drophover', drop: function(event, ui) { alert(this.id); $(this).addClass('drophighlight').find('p').text('' + ui.draggable.children("span").text() + ''); } }); } 

Updated script:

http://jsfiddle.net/johnkoer/FvG2J/28/