How do I refresh Tablesorter's content-editable

Question

I have tablesorter working for a table, like so:

$("#mytable").tablesorter({
    // set initial sort
    sortList: tablesorting,
    emptyTo: 'none',
    widgets: ["stickyHeaders", "resizable", "filter", "editable"],
    widgetOptions: {
        ...
        editable_columns: [6],
        editable_editComplete: 'editComplete',
        editable_enterToAccept: true,
        editable_noEdit: 'missing'
    }
})

Periodically I replace some of the rows' HTML with jquery, however when this happens, the content-editable column no longer works.

How can I get tablesorter to reapply the content editable widget after changing the row?

Answer 1

The editable widget was written to use delegated events. And only elements with a set contenteditable attribute are targeted (not set to "false"). So when you add a new row, make sure the table cells contain elements with contenteditable="true" attribute applied.

Note that IE does not allow making TR, TH or TD table cells directly editable, so add a div or span inside:

<tr>
    <td><div contenteditable="true">Foo</div></td>
    <td><div contenteditable="true">Bar</div></td>
</tr>

Once that is done, the editable widget should automagically allow work on that row.