问题描述
|
我第二次发布此问题。而且我仍然没有得到任何答案。好像已经四天了,我一直陷入这个问题。 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);
}
在这方面我需要帮助。
解决方法
您使用的ѭ1UI是jQuery UI方法,但仅通过将其附加到表标题就无法在列中拖动。您需要利用一个辅助函数:
对于Dragtable,尽管文档说:
将class =“ \ draggable \”添加到您可能要重新排序的任何表中。
这有点简单,因为开发人员应该意识到可以使用Javascript动态创建事物!
换句话说,仅将类“ 2”添加到动态创建的表中是行不通的。这是因为在DOM准备就绪时,对所有表执行
init
之后,draggable已经添加了事件侦听器。更改类不会自动添加事件侦听器。如果这是一个jQuery插件,则可以使用.live
将事件侦听器附加到现在和将来的任何动态创建的表中,但不幸的是,它不是。
您需要将一个拖动表附加到新创建的表上,尝试:
dragtable.makeDraggable(newTable);
编辑:
确保您对表元素本身起作用,而不是对jQuery对象起作用,即:
dragtable.makeDraggable(newTable[0]);
小提琴:http://jsfiddle.net/garreh/64pyb/