I have created a dynamic table in jquery and using draggable() to move the table columns (reordering). but it is not working. when i create a table manually then it is working fine, the columns are also moving, what am i doing wrong when i create a dynamic table then use draggable() by dynamic table id. I have been stuck in this problem from last couple of days. Here is my code.
function addTab() {
var tab_title = $tab_title_input.val() || 'Tab '+tab_counter;
//alert(tab_title);
$tabs.tabs('add', '#tabs-'+tab_counter, tab_title);
var newTableDiv = $("<div />",{id: 'dialog'+tab_counter});
newTableDiv.appendTo("body");
alert("div appended to body"+" "+'dialog'+tab_counter);
var setCSS = {
'width' : '100%',
'cellSpacing' : '1px',
'cellpadding' : '2px'
}
var newTable = $('<table class="ui-widget">'+
'<thead id="myTableHead'+tab_counter+'" class="ui-widget-header">'+
'<tr><th><strong>Symbol</strong></th>'+
'<th><strong>Price</strong></th>'+
'<th><strong>Volume</strong></th>'+
'<th><strong>Buy</strong></th>'+
'<th><strong>Sell</strong></th></tr></thead>'+
'<tbody id="sortable'+tab_counter+'" class="ui-widget-content">'+
'<tr><td>PSO</td><td>100.00</td><td>12</td><td>120.00</td><td>130.00</td></tr>'+
'<tr><td>ASO</td><td>200.00</td><td>11</td><td>120.00</td><td>130.00</td></tr></tbody></table>').attr('id', 'myTable'+tab_counter).css(setCSS);
$(newTableDiv).append(newTable);
$('#myTable'+tab_counter).draggable(); //This is draggable
$('#myTable'+tab_counter).tablesorter();
$( '#sortable'+tab_counter).sortable();
}