jQuery cannot load plugin file using ajax before calling the plugin function, thus, gives kind of weird result -

i trying load jsvascript files @ runtime this

<script type="text/javascript" src="jquery/jquery.js"></script> <script type="text/javascript"> var src_url = 'http://localhost/mytest/scripts/'; var scripts = [     'jquery/colorbox/jquery.colorbox.js',     'app/mbro.js' ];  (var x = 0; x < scripts.length; x++) {     surl = src_url + scripts[x];     $.ajax({         url: surl,         datatype: "script",         async: false,         success: function() {             console.log(x + ': ' + surl);         }     }); } </script> 

what trying here load jquery.colorbox.js before loading mbro.js, mbro.js tries initialize colorbox on click of link. content of mbro.js follows

(function ($, w, d) {     var abc = {};     abc.util = {         openpopup: function () {             $(".mbro").colorbox({                 inline: false,             });         },     };      $(d).ready(function ($) {         abc.util.openpopup();     });  })(jquery, window, document); 

the html looks this

<a class="mbro" href="media/popup">browse</a> 

but getting error

typeerror: $(...).colorbox not function $(".mbro").colorbox({ 

what should cause of error , how resolve situation. please give me suggestions. thank in advance.

you should use $.getscript() jquery method , keep async behaviour of ajax requests, e.g:

(function loadscript(x) {     surl = src_url + scripts[x];     $.getscript(surl, function(){         if(scripts[++x]) loadscript(x);     }); }(0)); 

to keep cache behaviour, should use $.ajax method mentionned in comment below. here workaround if reason want still use $.getscript method:

by default, $.getscript() sets cache setting false. appends timestamped query parameter request url ensure browser downloads script each time requested. can override feature setting cache property globally using $.ajaxsetup()

var cachesetting = $.ajaxsetup()['cache']; $.ajaxsetup({   cache: true }); (function loadscript(x) {     surl = src_url + scripts[x];     $.getscript(surl, function () {         if (scripts[++x]) loadscript(x);         else {             $.ajaxsetup({                 cache: cachesetting              });              }            }); }(0));