Draggable（）在jquery中不工作

Question

我在第二次发布这个问题。我仍然没有得到任何答案。它像四天一样，我一直陷入这个问题。 draggable（）在动态创建的表格中不起作用我已经比较了手动创建的表格和动态表格的DOM，每个事物都是相同的，但它在手动创建的表格中而不是在动态表格中工作。这意味着在手动我可以移动表列像重新排序而不是动态。请在这里需要帮助。下面是我的代码。

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" width="100%" border="0" cellspacing="1" cellpadding="2">'+ 
        '<thead id="myTableHead'+tab_counter+'" class="ui-widget-header" style="display: table-header-group;">'+ 
        '<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" style="display: table-row-group;">'+ 
'<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); 
     $(newTableDiv).append(newTable); 

     $('#myTable'+tab_counter).tablesorter(); 
     $('#myTable'+tab_counter).draggable(); //**not working** 

     $('#sortable'+tab_counter).sortable();   

     if ($("#myTable"+tab_counter).length > 0) { 
      alert("id exists"); 
     } 
     alert("#myTable"+tab_counter); 


     var myDiv = $("<div />", { "class":"ui-tabs-panel ui-widget-content ui-corner-bottom",id: 'tabs-'+tab_counter}); 
     myDiv.append("#tabs"); 

     $("#sortable"+tab_counter).show(); 
     $("#myTableHead"+tab_counter).show(); 

     $('#dialog'+tab_counter).prependTo('#tabs-'+tab_counter);   
     tab_counter++; 
     //alert(tab_counter); 
    } 

我需要帮助。

Answer 1

您使用的是.draggable，它是一种jQuery UI方法，但仅仅通过将其附加到表头中，它将无法在列周围拖动。你需要ultilise一个辅助功能：

对于dragtable，虽然文件说，到：

添加类=“拖动”你可能想重新排序的任何表。

这有点简单的说，因为开发人员应该意识到事情可以在Javascript中动态创建！

换句话说，只是简单地将类draggable添加到动态创建的表将不起作用。这是因为在DOM准备就绪时，可拖动的已经为所有表执行init之后添加了事件侦听器。更改类不会自动添加事件侦听器。如果这是一个jQuery插件，它可以使用.live将事件侦听器附加到现在和将来的任何动态创建的表中，但不幸的是它不是。

你需要附上dragtable到新创建的表，请尝试：

dragtable.makeDraggable(newTable); 

---

编辑：

确保你的表演表格元素本身，而不是jQuery对象即：

dragtable.makeDraggable(newTable[0]); 

小提琴：http://jsfiddle.net/garreh/64pyb/