【问题标题】:Why won't jQuery's load event fire on dynamically inserted script elements?为什么 jQuery 的 load 事件不会在动态插入的脚本元素上触发?
【发布时间】:2014-02-18 12:43:49
【问题描述】:

我正在使用 jQuery 动态插入脚本元素。脚本按预期加载,但加载事件未触发。

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

如果我使用常规 JavaScript 插入元素,加载事件会触发并且可以被 jQuery 捕获。

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

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

我做错了什么?

【问题讨论】:

  • 为什么不直接使用 javascript.. jquery IS javascript,有什么问题呢?
  • 这就是我目前正在做的事情,但我仍然想知道为什么 jQuery 实现没有按预期工作。因此问题。

标签: javascript jquery


【解决方案1】:

改用jQuery.getScript()[docs] 方法。

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

或者,在当前版本的 jQuery 上,使用如下的承诺模式

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

编辑:删除了从问题中复制的代码注释,因为它增加了答案的混乱。感谢@Jeff 指出。

【讨论】:

  • 您将我与“此警报不会触发”混淆,但再次阅读 OP 后,我意识到您只是复制了。当您的答案试图解决该问题时,删除“此警报不会触发”不是一个好主意吗? ;)
  • @Jeff:哈!我什至没有读过!是的,非常好的主意。正在更新...谢谢。 :o)
  • 哈哈,没问题。很高兴看到我在这里有一些用处,特别是考虑到我已经问了 64 个问题:P
  • 感谢您的回答帕特里克。我们需要求助于一个具有 XMLHttpRequest 开销的方法,而不是仅仅能够将元素附加到 DOM 并绑定到它的加载事件,这似乎很奇怪。
  • @johnbillion:是的,我认为是 jQuery 清理了添加到页面的项目,删除了脚本,所以 appendTo 正在删除脚本。不知道他们为什么这样做。所以除了.appendTo()之外,你可以用jQuery来做这一切。
猜你喜欢
  • 2014-09-13
  • 2012-11-23
  • 1970-01-01
  • 2011-01-27
  • 1970-01-01
  • 2014-12-22
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多