动态脚本加载第一次有效，但此后无效答案

【问题标题】：Dynamic script loading works first time but not thereafter动态脚本加载第一次有效，但此后无效
【发布时间】：2013-08-05 16:41:03
【问题描述】：

我的网站上有联系页面，其中有各种社交网络链接（加上一个电子邮件表格），旁边有用于选择每个链接的链接。单击链接向服务器发出 ajax 请求，成功时将普通 div 的 html 替换为响应。

每个都有一个与之关联的javascript文件，并且在ajax成功时将其作为脚本标签添加到文档头中。

这些脚本应在每次加载时进行评估并准备响应中的 DOM。但是，我发现第一次单击效果很好，脚本已加载并执行，但是当我单击另一个链接时，它会加载新脚本，但似乎永远不会执行。之后这些动态加载的脚本都无法工作。

加载每个选项的ajax调用在这里绑定到每个链接的点击事件：

$('.socialLink').click(function() {
  var id = $(this).prop('id').toLowerCase();
  var callingObj = $(this);
  $.ajax({
    url: "./socialMedia/" + id + ".php",
    success: function(msg) {
      $('.socialLink').css('opacity', '0.4');
      $('.socialLink').data('active', false);
      callingObj.css('opacity', '0.9');
      callingObj.data('active', true);
      if ($('#Feed').css('display') !== 'none') {
        $('#Feed').slideToggle(400, function() {
          $('#Feed').html(msg);
        });
      }
      else
      {
        $('#Feed').html(msg);
      }
      $('#Feed').slideToggle(400);
      $.getScript('./script/' + id + '.js');
    }
  });
});

问题是，我也为网站上的每个页面动态加载脚本......而且似乎没有任何问题。

如果你去这里http://www.luketimoth.me/contact.me，你可以看到我正在谈论的页面。目前只有两个选项实际加载任何 javascript，电子邮件和 twitter 的......其余的是空的 js 文件，里面只有一个评论。

编辑：我现在正在使用 jQuery getScript()... 我已经更改了上面的代码以反映这一点。我尝试加载的脚本没有按预期工作，是：

twitter.js（只是 twitter 为您提供的其中一个小部件的标准代码）：

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.
js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

email.js：

$('#Send').click(function() {
  var senderName = $('#YourName').val();
  var senderEmail = $('#Email').val();
  var emailSubject = $('#Subject').val();
  var emailBody = $('#EmailBody').val();
  $.ajax({
    url:'./script/sendMail.php',
    data: {
      name: senderName,
      email: senderEmail,
      subject: emailSubject,
      body: emailBody
    },
    type: "POST",
    success: function(msg) {
      $('#success').html(msg);
    }
  });
});

$('input, textarea').focus(function() {
  if (this.value === this.defaultValue) {
    this.value = '';
  }
});

$('input, textarea').focusout(function() {
  if (!this.value.length) {
    this.value = this.defaultValue;
  }
});

【问题讨论】：

你正在使用 jQuery...你为什么不使用$.getScript()？ api.jquery.com/jQuery.getScript 。我不确定它是否能解决任何问题，但您不妨使用该库
乍一看，您正在“添加”具有相同 ID 的重复元素 - 似乎您应该替换元素内容而不是添加新的、可能重复的元素。
@Ian 使用 $.getScript() 确实改善了一些事情，我可以点击 twitter，获取脚本，然后点击发送电子邮件并获取它，但是如果我点击离开并点击返回，同样的事情发生了......脚本不运行，DOM 元素不是“活动的”（因为想要一个更好的词）。编辑：也许我说得太早了。好像没什么区别。
我们可以看一下您正在导入的脚本吗？这似乎是那个问题，因为这里的一切对我来说似乎都很好......顺便说一句，既然你从 Ajax 中获取 HTML 并将其放在 DOM 中，为什么它不是包含 script 标签的 ajaxed html？
你指的脚本执行了吗？我找不到在哪里。'

标签： javascript jquery dynamic-loading

【解决方案1】：

感谢所有 cmets 和建议。我最终决定在后台加载所有内容，而不是每次都发出 ajax 请求。

现在它实际上是一个响应速度更快的页面......诚然，以在后台使用未使用的 DOM 元素为代价。不过，考虑到它的速度有多快，我认为这种权衡是可以接受的。

【讨论】：