jquery dynamic div addition with droppable attribute

Question

I am trying to build a layout page. this page has 1 main panel. if a user clicks "create new tab" I want to build a new div, and make that div droppable. In this watered down example. I want to click "Create new tab" and then be able to drop the "Other" div into it.

see my fiddle: Fiddle

  $('#newTab').click (function()
  {
    i++;
    var div = $('<div class="drop"/></div>').appendTo('#mainBucket');
    div.attr('id', 'holdy'+i);
    div.addClass('tabModule drop');
    div.html('hello');
  });

Answer 1

You have to make every new div dropable on its own. After you created a new div you need to apply jQuerys dropable-method. Dropable is not applied to elements that are created in future and matching your selector before, so you have to do this on your own.

var newDiv = jQuery('<div class="drop" />').droppable().attachTo('body')

i modified your example here: http://jsfiddle.net/Valtos/dQzy5/7/