Nocturnal Lore

Jeditable is a great plugin which allows to create inline editing for any element on page. There is a lot of demos in well documented support.

What was a hard nut to crack for me for a while was adding this plugin dynamically. Solution can be global init for any field after element load. E.g. called by funciton after new content is set.

function CreateEditable()
{
  $('.edit').editable('http://www.example.com/save.php');
}
 
$(document).ready(function(){
 
  $("a").click(function(){
    // Create element    
    $("<div />",{ text: 'editme'  })
     .addClass("edit")
     .appendTo("body");
    // call event listener creator
    CreateEditable() 
   })
})

In this way, event listener is created for all elements regardless they will use it.
What we can do is add plugin only in the moment we need it.

$(document).ready(function(){
 
  $("body").on("click",".edit",function(){
    $(this).editable('path/save',{ 
      ...
      event: 'focus.editable',
    }).trigger("focus");
  })
})

To be working well we need add listener of editable not to click() event to trigger it. If we set event to click it will run at the second attempt. (1st click will only init a listener!) If we try trigger click() event we will get in a loop.

The trick lies in the fact that we prepare plugin for event we’ll trigger().