Draggable（）在jquery中不工作

我在第二次發佈這個問題。我仍然沒有得到任何答案。它像四天一樣，我一直陷入這個問題。 draggable（）在動態創建的表格中不起作用我已經比較了手動創建的表格和動態表格的DOM，每個事物都是相同的，但它在手動創建的表格中而不是在動態表格中工作。這意味着在手動我可以移動表列像重新排序而不是動態。請在這裏需要幫助。下面是我的代碼。Draggable（）在jquery中不工作

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); 
    }

我需要幫助。

來源

2011-05-26 JN_newbie

@Java_Newbie它完全打破了嗎？你是什麼意思動態創建表？由什麼動態創建？表格之間的標記有沒有區別（手動/動態）？這兩種類型（插件或其他）之間是否存在環境差異？ – JohnP 2011-05-26 07:10:55

@JohnP .....它不會完全打破。動態的意思是我創建一個表，動態表。現在有另一個表，我手動創建，當我使用draggable（）它工作正常。但是當我使用動態表時，它不會拖動表列。我也使用第三方插件http://www.danvk.org/wp/dragtable/它也可以在手動創建的表格中正常工作，但是當涉及到動態創建的表格時，它不會拖動表格列。我也用firbug檢查過標記，兩者都是一樣的。 – 2011-05-26 07:22:29

你的表格是一個小部件，添加到一個新的選項卡，你想拖動什麼？表頭和列移動？這將是一件好事，如果你可以提供一個屏幕截圖，這正是 – 2011-05-26 07:23:30

您使用的是.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/

來源

2011-05-26 07:45:24

@Gary Geen .... dragtable.makeDraggable（newTable）;不工作，給出錯誤。我對jquery很新，現在我正在使用幫助函數。我會先學習助手功能，然後會告訴你結果。 – 2011-05-26 09:21:25

它給了什麼錯誤？ – 2011-05-26 09:27:34

它給出....「table.getElementsByTagName不是一個函數」。 – 2011-05-26 09:36:30

Draggable（）在jquery中不工作

回答

相關問題