Add Jeditable fields to a delegate in jQuery

How can i combine the following with a delegate in jQuery?

I have a #commentContainer surrounding all the edit开发者_高级运维able elements, and I am dynamically adding editable fields (Jeditable). the editing ability is not working for dynamically loaded items.

     /* Bind Jeditable instances to "edit" event. */
    $(".edit").editable('/Comment/PostComment/', {
        type: 'textarea',
        cancel: 'Cancel',
        submit: 'OK',
        indicator: '<img src="img/indicator.gif">',
        tooltip: 'Click to edit...',
        event: "edit"
    });
    /* Find and trigger "edit" event on correct Jeditable instance. */
    $(".edit_trigger").bind("click", function () {
        $(this).prev().trigger("edit");
    });

Event delegation doesn't work for running code when an element is added to the DOM. Some browser event needs to first take place, like a click.

So if you're adding new elements that should have the editable plugin run against them, you'll need to call it manually as you add them.

$('<textarea>').editable( /* settings */ )
               .appendTo( '#commentContainer' );

There is an solution do add jQuery.editable for dynamically added fields.

$("body").on("click",".editable",function(e){

  // Add editable plugin
  // but! for `focus` instead common `clik` event

  $(this).editable('go.to',
    {
      event : 'focus.editable',
      ..
      ..

     // Then trigger focus event

   }).trigger("focus");
 })