jQuery append will download external src in script tags, but won't load into DOM

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(), but this seems to be the case for any other jQuery DOM insertion method.

Here's an example in Stack Snippets

<!-- begin snippet: js hide: false --> <!-- language: lang-js -->

$(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);
  
});

<!-- language: lang-html -->

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>

<!-- end snippet -->

Even though this will download the script in the network tab:

It will still return the following error (indicating that the external library - select2 - never loaded):

I'd prefer not to use $.getScript() as I'm actually loading this string dynamically with .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?

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:

<!-- language: lang-js -->

setTimeout( function() {
  $(".select2").select2();
}, 2000);

Simple Demo in Stack Snippets:

<!-- begin snippet: js hide: false --> <!-- language: lang-js -->

$(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);
  
});

<!-- language: lang-html -->

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>

<!-- end snippet -->

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

function onAvailable(listenFor, callback) {
  var interval = window.setInterval(function() {
    if (Object.byString(window, listenFor)) {
      clearInterval(interval);
      callback()
    }
  }, 100);
};

Advanced Demo in Stack Snippets

<!-- begin snippet: js hide: false --> <!-- language: lang-js -->

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);
  
  
});

<!-- language: lang-html -->

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>

<!-- end snippet -->