Question

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

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

这些脚本应评估每个负载并在响应中准备DOM。但是，我发现第一次单击工作完美，脚本已加载并执行，但当我点击另一个链接时，它会加载新脚本但似乎永远不会执行。这些动态加载的脚本都不会起作用。

加载每个选项的ajax调用绑定到每个链接的click事件：

$('.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，电子邮件和推特...其余都是空的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;
  }
});

Answer 1

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

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

动态脚本加载首次运行但之后不运行

1 个答案: