Making JEditable work on new elements (.live)

Question

I'm using the JEditable plugin for in-place editing.

I have a "setup" function which calls .editable() on all the relevant classes. The problem is, I have newly appended elements which I'd like to make editable as well. Obviously, being newly added, .editable() never gets called on them.

In other words, I'm looking to get the effect that jquery's live() function does, but for the editable() function.

My current workaround seems kinda ugly to me (redscribe_button is the button that needs to be clicked to edit the text):

$(".redescribe_button").live("click", function(click_event) {
    click_event.preventDefault();

    $(".editable", $(this).parent().parent()).editable("/temp/", {
        event: "make_editable",
        indicator : 'Saving...',
        tooltip   : 'Click to edit...'
    });

    $(".editable", $(this).parent().parent()).trigger('make_editable');
});

In other words, I'm just calling .editable every time the edit button is clicked.

Any ideas for a better solution?

Answer 1

Calling editable more than once on an element has no adverse side effects, right? So why not just re-do the setup each time anything changes.

Answer 2

I just came to this question as well and solved it in a more elegant way (IMHO).

$('.jqEdit').live('click',function(event) {
    event.preventDefault();
    $(this).editable('save.php')
});