How initialize x-editable after DOM has changed?

Question

I think this kind of noob question, but anyway I had x-editable plugin that initilized in my document

 $(function(){
   $.fn.editable.defaults.mode = 'popup';
   $('.editable').editable();
 });

after I click on tab and some part of my page is refreshed via partials, the x-editable became not avaliable on this new elements.

I try to make this trick:

 $(document).on('click', '.editable', function(){
   $('.editable').editable();
 });

this works but now I must click two times to call x-editable on .editable element, first time to initialize x-editable and second time to call x-editable popover.

What's the best practice in this situation?

Thanks in advance!

Answer 1

1. You can mark new .editable somehow -for sample - .unprocessed and wait after click when .editable.unprocessed appears (setTimeout() - http://www.w3schools.com/js/js_timing.asp) and then do it editable

2. You can return your data from server with .js.erb view and after refreshing page parts add

   $('.editable').editable();