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

Question

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

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

这些脚本应该对每次加载进行评估并在响应中准备 DOM。但是，我发现第一次单击工作正常，脚本已加载并执行，但是当我单击另一个链接时，它会加载新脚本，但似乎从未执行。此后这些动态加载的脚本都不起作用。

加载每个选项的ajax调用绑定(bind)到每个链接的点击事件:

$('.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()...我已经更改了上面的代码以反射(reflect)这一点。我尝试加载的脚本未按预期工作，它们是:

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

电子邮件.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;
  }
});

Answer 1

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

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