Dynamic script loading works first time but not thereafter

Question

I have contact page on my website where I have various social network links (plus an e-mail form) with links at the side to select each one. Clicking a link makes an ajax request to the server, and on success replaces the html of a common div with the response.

Each one has a javascript file associated with it, and this is added as a script tag in the document head on ajax success.

These scripts should evaluate on each load and prepare the DOM in the response. However, I am finding that the first click works perfectly, the script is loaded and executes, but when I go to click on another link, it loads the new script but it never seems to execute. And none of those dynamically loaded scripts work thereafter.

The ajax call for loading each option is bound to each link's click event here:

$('.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');
    }
  });
});

The thing is, I dynamically load scripts for each page on the site, too... and don't seem to have any problems with that.

You can see the page I am talking about if you go here http://www.luketimoth.me/contact.me. Only two options actually load any javascript at the moment, the e-mail and twitter ones... the rest are empty js files with only a single comment inside.

EDIT: I am now using jQuery getScript()... I have changed the code above to reflect this. The scripts I am trying to load, which are not working as exepcted, are:

twitter.js (just the standard code twitter gives you for one of their widgets):

!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

Thanks for all the comments and suggestions. I decided in the end to load everything in the background rather than make an ajax request every single time.

It's actually a much more responsive page now... admittedly at the cost of having unused DOM elements in the background. Given how much faster it is, though, I think the trade-off is acceptable.