So dandavis is right - the library needs time to load before calling the initializer on it.  A naive implementation could just wait a short amount of time and try again like this:



    setTimeout( function() {
      $(".select2").select2();
    }, 2000);

### Simple Demo in Stack Snippets:





    $(function(){
      
      var selet2Html =
        '<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>' +
        '<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js" ><\/script>' +
        '<select class="select2">' +
        '  <option value="AK">Alaska</option>' +
        '  <option value="HI">Hawaii</option>' +
        '</select>' +
        '<script >' +
        '  setTimeout( function() {' +
        '    $(".select2").select2();' +
        '  }, 2000);' +
        '<\/script>';
       
      $("body").append(selet2Html);
      
    });



    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>



A more sophisticated solution would wait until `$.fn.select2` showed up in the DOM.  

**Enter `OnAvailable`**

You can call it like this:

    onAvailable('$.fn.select2', function() {
      alert('we did it');
    });

Here's the function that will poll the global namespace for your variable to popup.  It uses Alnitak's `Object.byString` solution from [Accessing nested JavaScript objects with string key][1]
  
    function onAvailable(listenFor, callback) {
      var interval = window.setInterval(function() {
        if (Object.byString(window, listenFor)) {
          clearInterval(interval);
          callback()
        }
      }, 100);
    };

### Advanced Demo in Stack Snippets





    function onAvailable(listenFor, callback) {
      var interval = window.setInterval(function() {
        if (objectFromString(window, listenFor)) {
          clearInterval(interval);
          callback()
        }
      }, 100);
    };

    function objectFromString(o, s) {
      s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
      s = s.replace(/^\./, '');           // strip a leading dot
      var a = s.split('.');
      for (var i = 0, n = a.length; i < n; ++i) {
        var k = a[i];
        if (k in o) {
          o = o[k];
        } else {
          return;
        }
      }
      return o;
    }

    $(function(){
      
      var selet2Html =
        '<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>' +
        '<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js" ><\/script>' +
        '<select class="select2">' +
        '  <option value="AK">Alaska</option>' +
        '  <option value="HI">Hawaii</option>' +
        '</select>' +
        '<script >' +
        '  onAvailable("$.fn.select2", function() {' +
        '    $(".select2").select2();' +
        '  });' +
        '<\/script>';
       
      $("body").append(selet2Html);
      
      
    });



    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>



[1]: https://stackoverflow.com/a/6491621/1366033

If I include a script with an external source and then try to parse using jQuery - it will download the script, but won't load it into the DOM.  I'm using using [`.append()`][API append], but this seems to be the case for any other jQuery DOM insertion method.

### Here's an example in Stack Snippets





    $(function(){
      
      var selet2Html =
        '<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>' +
        '<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js" ><\/script>' +
        '<select class="select2">' +
        '  <option value="AK">Alaska</option>' +
        '  <option value="HI">Hawaii</option>' +
        '</select>' +
        '<script >' +
        '  $(function() {' +
        '    $(".select2").select2();' +
        '  });' +
        '<\/script>';
        
      $("body").append(selet2Html);
      
    });



    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>



Even though this will download the script in the network tab:

![Network Activity][Network Activity]

It will still return the following error (indicating that the external library - select2 - never loaded):

![Uncaught TypeError: $(...).select2 is not a function][Console Error]

I'd prefer not to use [`$.getScript()`][API getScript] as I'm actually loading this string dynamically with [`.load()`][API load], so I'm not sure if it's going to contain any external scripts or not.

How can I get it to load the external library?

[API append]: http://api.jquery.com/append/
[API getScript]: https://api.jquery.com/jquery.getscript/
[API load]: http://api.jquery.com/load/

[Network Activity]: http://i.imgur.com/BlcxVQi.png
[Console Error]:    http://i.imgur.com/gQmwIA6.png