Question

I use http://www.arashkarimzadeh.com/jquery/7-editable-jquery-plugin.html edit-inplace plugin.

For a single editable element it works fine but I have many on my project. When I click on an element the following happens:

The actuall text disappears. Instead an <input> element appears. Everything I do is

$('th,td').editable();

But the table is loaded dynamically into the DOM so:

$('#id').load('template.html', function() {
    $('th,td').editable();
});

Any idea what is wrong here? Do you have an idea how to solve this?

http://jsfiddle.net/2gYw2/6/ (Not working) – Add the element and click to edit it then click on td or th to see the problem.

Answer 1

In fact you should call the method editable one time, no more.
I found 2 possibilities to solve this (maybe there are more solutions).

1. you create an array and store the objects which have been called with editable().
2. you add a variable to flag the call of editable in the jQuery Object

I prefer the second solution because I found it more easily to use. I just add a new function to jquery to do this.

EDIT :

I replace the variable by a class to the HTMLElement.

(function($){
    $.fn.refreshEditable = function(){
        $(this).each(function(){
            if(!$(this).hasClass("not-editable")){
              $(this).addClass("not-editable");
              $(this).editable();
            }
        });
    }        
})( jQuery );


$('th,td,h2').refreshEditable();

$('#addTable').click(function(){
    $('body').append("<div><h2>Add element</h2></div>");
    $('th,td,h2').refreshEditable();
});

I assume it is little bad to do this but it works. The example in live here.