Draggable()在jquery中不起作用

| 我第二次发布此问题。而且我仍然没有得到任何答案。好像已经四天了,我一直陷入这个问题。 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/     

要回复问题请先登录注册