jeditable dynamic elements

Question

I am using the Jeditable JQuery plugin to make edit in place changes to a list. This works fine with the existing list items on the page.

$('.edit').editable('http://localhost:8080/EditInPlace/Editable', {
    event     : "dblclick",
    callback : function(value, settings) {
        $(".dropdown dt a span").html(value);
        $("#result").html("Selected value is: " + getSelectedValue());
    }
});

However, I am adding list items dynamically on the page, and these do not respond to the event handler. I am assuming I need to use delegated events, like I use for the click event.

$(document).on("click",".edit",function(e){
    alert("click!");
});

I cannot figure out how to add the Jeditable handler to a delegated event. Any suggestions?

Answer 1

Delegation methods are intended for events. You could create a custom event but to keep it simple for now just call your plugin each time you add new elements that need it.

This can be in an ajax success callback, or after you call any insertion method like append() or html() in your code.

Several things you can do to keep code leaner are store the options object of the plugin in a variable so you don't have to create them each time, or create functions that contain numerous plugin calls.

Example:

var edit={ 
       url: 'http://localhost:8080/EditInPlace/Editable',
       opts:{
            event     : "dblclick",
            callback : function(value, settings) {
                 $(".dropdown dt a span").html(value);
                $("#result").html("Selected value is: " + getSelectedValue());
        }
    }
};

$(selector).append( newContentString).find('.editClass').pluginName(edit.url, edit.opts)