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?

Iorio

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.

Tyrannous

That is effectively what I'm doing, except instead of redoing it for everyone, I'm redoing it (or doing for the first time) on the element just clicked. Still, it feels kinda wrong. – Iorio

It works, and it keeps the code nice and tidy. It ain't broke, so no need to fix it. – Tyrannous

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')
});

Exordium