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方法，但只是通过将其附加到表头来拖动列是行不通的。您需要使用辅助函数：

对于可拖放，虽然文档说：

将class =“draggable”添加到您可能要重新排序的任何表格中。

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

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

您需要将一个dragtable附加到新创建的表上，请尝试：

dragtable.makeDraggable(newTable);

修改

确保你对表元素本身的行为，而不是jQuery对象，即：。

dragtable.makeDraggable(newTable[0]);

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

Draggable（）在jquery中不起作用

1 个答案: