jQuery Draggable: memory leak

Question

I have a simple html table that is being updated periodically by some websocket handler:

<table class="schedule">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        ...
    </tr>
    <tr>
        <td class="order"><div>Text 1</div></td>
        <td class="order">Text 2</td>
        <td class="order">Text 3</td>
        ...
    </tr>
</table>

(Total of 14 columns and about 10-20 rows, first cell in each row has a div element with no classes; rows have no css classes either.)

All rows/cells are being removed from the table on each update and only after the new "order" cells are added to it dynamically; there are no duplicate tables in the dom (checked); cells must be draggable, so if I add the following line at the end of the function that updates the table the page leaks about 1 mb in heap, adds about 200 new listeners and about 200 new nodes to the DOM. GC never collects those objects:

var dnd = $("table.schedule td.order").draggable();

If if comment that line out everything works great, GC collects everything. I suspect that the problem is in my selector but I spent hours now with Chrome's Tools and still can't see where the problem is. Any help is highly appreciated.

Answer 1

You are probably initializing draggable() over an over again on exisiting draggable elements, adding new listeners and stuff.

Try using destroy method like

$("table.schedule td.order").draggable("destroy").draggable();

If you can make use of the sortable widget instead, it has a refresh that identifies new elements which will probably suit you better.