I am using a json from a Google spreadsheet and a jquery plugin which is called throught this HTML line <ul id="example">. 

The thing is that when I dynamically append elements to the <ul id="example"> from within the JSON callback function, these are not recognized by the jquery plugin

Code:

<form> 

  <ul id="example">BLA BLA BLA</ul>

</form>

<script type="text/javascript"> 

jQuery(document).ready(function(){

cm_load(); //The fn that creates the script, brings the json and call the function to process it. script.setAttribute('src', ' http://spreadsheets.google.com/...?alt=json-in-script&callback=cm_loadMapJSON' ); 

$('ul#example').collapsibleCheckboxTree(); //Plugin call

});

</script> 

If I insert an <ul id="example"> plus some <li> in the HTML code the plugin works perfect

If I insert dynamically some <li> to the <ul id="example"> throught a javascrypt function before executing the callback ( ...json-in-script&callback=...) also work perfect.

But when I insert dynamically the <li> elements within the callback function (in my case: cm_loadMapJSON) does not work well.  

Does anybody knows what is happening?? and how to fix it??

I uploaded the files for a better understanding.

HTML                  

jquery plugin (.js)   

CSS                   

Thank you very very much