jquery - javascript function ready code not working -

i trying determine why script not working -- working until added function ready element make page load before running - think maybe did not add correct closure. new js if has ideas, great!

    <script> //a simple function used make ajax call , run callback target page source argument when successful function getsubpagesource(url, successcallback) {     var xhr = xmlhttprequest();     xhr.onreadystatechange = function()     {         if (xhr.readystate == 4 && xhr.status == 200)         {             //when source returned, run callback response text             successcallback(xhr.responsetext);         }     };     xhr.open('get', url, true);     xhr.send(); }  function readyfn(jquery) {     // code run when document ready.  //find categories sub categories var categories = document.getelementsbyclassname('has-subcategories'); //loop through each category (var ii = 0, nn = categories.length; ii < nn; ii++) {     //use closure pass in static ii     (function(ii)     {         //get element         var element = categories.item(ii);         //find id         var id = element.getattribute('data-category');         //find url         var href = element.getattribute('href');         if (id && href)         {             //found             getsubpagesource(href, function(data)             {                 //find sub categories                 //trim off before id shows first                 var substrsource = data.substr(data.indexof('data-category="'+id+'"'));                 //trim off remaining of category title                 substrsource = substrsource.substr(substrsource.indexof('</a>'));                 //trim off next category found                 substrsource = substrsource.substr(0, substrsource.indexof('home-categories-main'));                 //trim off next category starts, leaving source of sub categories                 substrsource = substrsource.substring(0, substrsource.lastindexof('<a '))                  //insert main menu after title                 console.log(id, substrsource);                  //create new node capable of having children                 var newnode = document.createelement("span");                 //insert new source new node                 newnode.innerhtml = substrsource;                  //insert new node after element                 element.parentnode.insertbefore(newnode, element.nextsibling);             });         }     })(ii); }  } $(document).ready(readyfn);  </script> 

instead of

$(document).ready() 

try use

$(document).ready(function() { }) 

or

$(function() { });