jquery - call javascript page function inside ajaxed html -

i have page use jquery load content div element

<div id="contents-box-in"></div> 

jquery code in page

$(document).ready(function() {          $("#contents-box-in").load("new-01.php", function() {                            $('#contents-box-in').fadein(120);                       });          var updateboxdata = function(data) {              $('#contents-box-in').fadeout(100, function() {                 $('#contents-box-in').html(data).fadein(130);             });          }      }); 

the content load form needs load new page sending collected data form

            $('#form-buttons-next').click(function(e) {                  var formdata = new formdata($(this)[0]);                  var forms = $.ajax({                     url         : 'new-02.php',                     type        : 'post',                                        data        : formdata,                     async       : false,                     cache       : false,                     processdata : false,                     contenttype : false                 });                  forms.done(function(data) {                     if (data != null) {                          updateboxdata(data);                      }                  });                  forms.fail(function(jqxhr, textstatus) {                      alert("error");                  });              }); 

since in different step use shared function contained in page loading ajax content updateboxdata undefined

i guess ajaxed content can't see parent container function

the easy way load different .js file containing shared function, wondering if possible access updateboxdata ajaxed contents

the function updateboxdata defined inside callback function passed .ready , hence scope limited function. let call callback function fx.

the click handler (the function passed .click in second part), call fy defined outside of fx , result not have access variables defined in fx (remember updateboxdata variable inside fx).

that why code not work. working take updateboxdata out of callback in .ready function:

$(document).ready(function() {     $("#contents-box-in").load("new-01.php", function() {                        $('#contents-box-in').fadein(120);                   }); }); function updateboxdata(data) {     $('#contents-box-in').fadeout(100, function() {         $('#contents-box-in').html(data).fadein(130);     }); } ... 

the rest same.