title: Dynamic script loading works first time but not thereafter
body: <p>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.</p>
  
  <p>Each one has a javascript file associated with it, and this is added as a script tag in the document head on ajax success.</p>
  
  <p>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.</p>
  
  <p>The ajax call for loading each option is bound to each link's click event here:</p>
  
  <pre><code>$('.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');
      }
    });
  });
  </code></pre>
  
  <p>The thing is, I dynamically load scripts for each page on the site, too... and don't seem to have any problems with that.</p>
  
  <p>You can see the page I am talking about if you go here <a href="http://www.luketimoth.me/contact.me" rel="nofollow">http://www.luketimoth.me/contact.me</a>. 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.</p>
  
  <p>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:</p>
  
  <p>twitter.js (just the standard code twitter gives you for one of their widgets):</p>
  
  <pre><code>!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");
  </code></pre>
  
  <p>email.js:</p>
  
  <pre><code>$('#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;
    }
  });
  </code></pre>