Unbind jquery plugins

Question

Hello, I'm sure this is simple but I'm banging my head!

I'm using the excellent jQuery plugin editable (http://www.appelsiini.net/projects/jeditable). Users can create a form on the fly, and click to edit the title, the body of the text, whatnot.

Every time the user creates a new question, I rebind the plugin like so:

$('.edit').editable()

Where every element with class 'edit', should be editable.

The problem is, previous 'edit' elements seem to get double bound... that is, when you click to edit them, an input field shows up, containing the following:

<input class="">

Which makes sense since it's getting bound twice (or more). How best to approach this issue? My instinct is to unbind the plugin on all 'edit' elements and then rebind it but I don't know how to do this.

Thanks for your help

Answer 1

Scope your selector to just the newly created form.

$('<form>...</form>').appendTo('someDiv')
                     .find('.edit')
                     .editable();

or

$('form:last').find('.edit')
              .editable();

Note that the selectors for the form are just examples. You just need to find the right form and only apply the editable plugin to the items decorated with the edit class within it.

Answer 2

A "plugin" is just a function added to jQuery.fn. Unless the creator defines a remove or destroy method, the function cannot be reversed.

Edit: the editable function, when given the parameter 'destroy', unbinds the plugin.