1

我的网站上有联系页面，其中有各种社交网络链接（加上一个电子邮件表格），旁边有链接可以选择每个链接。单击链接会向服务器发出 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");

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

1 回答 1

0

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

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

于 2013-08-06T12:52:14.830 回答