Ajax Load with Javascript Script in target container

On my site, there is an area where I load several different widgets via AJA开发者_开发技巧X. Some widgets need an external JS script that the rest of my page doesn't so I'd rather not load that script until the window opens for that specific widget.

the ajax code is:

$.get(content_url, null, function(rawResponse, status, xhr) { // get new data
    content_target.html(rawResponse); // replace with new data
    loadingSomething = false;
});

The content loaded is:

<script type="text/javascript" src="http://www.bandsintown.com/javascripts/bit_widget.js"></script>
<script type="text/javascript">var widget = new BIT.Widget({"artist": "{{ id }}"});widget.insert_events();</script>

But when I do this, the widget doesn't load. I'm guessing it's because the external script isn't loading.

Any ideas on how to make this work? Keep in mind I'm loading several different widgets with their own external scripts, so it'd be tough to add that into the JS since that's standardized across all widgets.

Thoughts?

It's a bit of a headache to load scripts like this, especially if you're trying to make a cross-domain ajax request. Consider using HeadJS to improve load times without making things hellishly complicated.

JavaScript loader

Load scripts in parallel but execute in order

head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() {
 
   // all done
 
});

Head JS loads JavaScript files like images without blocking the page. Your page will be faster even with a single combined file.