How to make new objects draggeble with live

Question

Hello I have an Object like this (reduced form)

<script type="text/javascript">
var tables = [
  {id : 1,
   name      : "event",
   attributes: [
     {
     attname : "eventID",
     PK      : true
     }
   ]
  }
</script>

and i use the microsoft template plugin to create ne HTML

<script id="db_tbl_template" type="text/html">
<div class="table" id="t${id}">
  <h2>${name}</h2>
  <ul>
    {{each attributes}}<li><span class="attribute">${attname}</span></li>{{/each}}
  </ul>
</div>
</script>

The boxes which i create get functionality. Here a reduced form

$(function(){
  $(".table ul li").live('click', function(){
    $(this).toggleClass("query");
  }); 

  $(".table").live('draggable', function(){
    handle: 'h2'
  });

  $("#db_tbl_template").tmpl(tables).appendTo( "#tables" );
});

The click event on a list item works very fine, but the created divs are not draggable. can someone tell me what i do wrong? Thanks a lot four your attention and your help.

Lara

Answer 1

See a related question:

http://stackoverflow.com/questions/1805210/jquery-drag-and-drop-using-live-events