How do I get x-editable to work with ajax content

Question

I have a question about live loaded ajax content and .editable();

I am loading content via ajax that needs to have the ability to tie into the .editable() functions on the parent page. I am not finding much in terms of documentation that addresses this. I think I must be blind or sumthin'.

How do I get this .editable to work when trying to access it via ajax live loaded content:

 $('#charge_name a').editable({
     // scripts here...
 });

Thanks so much for your help!!!

Answer 1

Among the options there is a parameter called selector

More info here http://vitalets.github.io/x-editable/docs.html#editable

This would delegate editable to the targets even after they've been added to the DOM after load.

Answer 2

Im not sure if this is the best approach, but for the sake of not being able to find a better solution, this is what I have come up with:

I created a function to contain my editable script such as this:

 function myEditables(){
       $('#charge_name a').editable({
          // scripts here...
       });
 }

Then when ever I need to activate my editables on the page, whether after an ajax call or a page load I just call the name of the function: myEditables();

If anyone knows of a better way, please let me know I would be more than grateful. Thanks!