Adding class is not working

Hi i am creating a table dynamically in jquery. What i am doing over here is also adding class which is "draggable ui-widget" but it is not affecting/working on my table.

   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 newTable = $('<table id="myTable'+tab_counter+'" class="draggable" ></table>');
********************Class which i am adding in table but not working***********
        var newTable = $("<table />",{"class": "draggable ui-widget",id: 'myTable'+tab_counter,width: '100%',border: '0',cellspacing: '1px',cellpadding: '2px'});                       
        newTable.appendTo('#dialog'+tab_counter);           
        alert('myTable'+tab_counter);   
        newTable.append('<thead class="ui-widget-header"><tr></tr></thead>');
        alert("Header Created");
        var thead = $('thead tr', newTable);
        thead.append('<th><strong>Symbol</strong></th>');
        thead.append('<th><strong>Price</strong></th>');
        thead.append('<th><strong>Volume</strong></th>');
        thead.append('<th><strong>Buy</strong></th>');
        thead.append('<th><strong>Sell</strong></th>');
        alert("Header Created");            

What exactly i am doing wrong over here. I am very new to jquery and still trying my best.

---

Actually you can create a table very easy in jquery:

var table = "<table class='draggable ui-widget'>" +
            "<thead><tr><th></th></tr></thead>"+
            "<tbody>"+
            "<tr><td></td></tr>"+
            "<tr><td></td></tr>"+
            "</tbody></table>";

Then append it to your div by (#divid).append(table); This should work, also it is very easy.

---

Adding class is not enough. AFAIK you should explicitly point your element to be draggable. For example add id to your table element <table id='draggable'... and then make it draggable $('#draggable').draggable();.

By the way dom manipulations are very expensive. So it's better in terms of performance costs first create entire table html like @tittletipz pointed it out and then append it to your div.

---

Dynamically added class cannot be accessed by events normally

In your example if i have to trigger a function on click event, I cannot use

$('.draggable').click(function{
});

I should use

 $('.draggable').live('click', function{
    });

as binding to event can happen only like this. But you have not mentioned how do you want to use the class