Delete a DOM element and its associated jquery plugin and data

Question

1. First, I'm using a jquery plugin on an element, lets say $('#myElement').usePlugin();.

2. Second, I want to destroy the original element and any plugin variables etc that may still exist in JS.

3. Third, create a new #myElement and redo $('#myElement').usePlugin();.

I'm having trouble with step #2. When I do $('#myElement').remove(), there is residual strange behavior when I recreate the element and instantiate the plugin.

FYI: this is the plugin I'm having trouble with: http://mindmup.github.io/editable-table/. If I create a table, make it editable, everything works fine.

But then if I delete the table, recreate the table, make it editable, I get strange behavior where fields are editable, but when I hit "enter", the value does not save and I get this error Uncaught TypeError: Cannot read property 'trigger' of undefined.

Answer 1

I would modify this line in the plugin:

https://github.com/mindmup/editable-table/blob/master/mindmup-editabletable.js#L115

to:

    $(window).on('resize.mindmup', function () {

Now, when you want to remove that event, remove it by namespace.

$(window).off("resize.mindmup");

Continue removing and re-creating the table, then use the above line to remove the window resize event before re-initializing the plugin.