I'm dynamically inserting a script element using jQuery. The script loads as expected, but the load event does not fire.

jQuery('<script/>').attr({
    type : 'text/javascript',
    src : '.js'
}).appendTo('body').load(function(){
    /* This alert does not fire: */
    alert('I just loaded!');
});

If I use regular JavaScript to insert the element, the load event does fire and can be caught with jQuery.

var e = document.createElement('script'); 
e.type = 'text/javascript';
e.src = '.js';
document.body.appendChild(e);

jQuery(e).load(function(){
    /* This alert does fire: */
    alert('I just loaded!');
});

What am I doing wrong?

I'm dynamically inserting a script element using jQuery. The script loads as expected, but the load event does not fire.

jQuery('<script/>').attr({
    type : 'text/javascript',
    src : 'http://platform.twitter./widgets.js'
}).appendTo('body').load(function(){
    /* This alert does not fire: */
    alert('I just loaded!');
});

If I use regular JavaScript to insert the element, the load event does fire and can be caught with jQuery.

var e = document.createElement('script'); 
e.type = 'text/javascript';
e.src = 'http://platform.twitter./widgets.js';
document.body.appendChild(e);

jQuery(e).load(function(){
    /* This alert does fire: */
    alert('I just loaded!');
});

What am I doing wrong?

• javascript
• jquery

• 2 Why not just use javascript.. jquery IS javascript, so what's the problem? – AlanFoster Commented Jun 26, 2011 at 17:35
• 2 That's what I'm currently doing, but I'd still like to know why the jQuery implementation isn't working as expected. Hence the question. – John Blackbourn Commented Jun 28, 2011 at 7:31

1 Answer 1

Use the jQuery.getScript()^[docs] method instead.

$.getScript('http://platform.twitter./widgets.js',function(){
    alert('I just loaded!');
});

Or, on current versions of jQuery, using the promise pattern as below

$.getScript('http://platform.twitter./widgets.js')
  .done(function(){
    alert('I just loaded!');
  })
  .fail(function(){
    console.log('script could not load');
  })
;

EDIT: Removed the code ment that was copied from the question, as it added confusion to the answer. Thanks to @Jeff for pointing it out.