title: Javascript script doesn't work the first time but works after that
body: <p>I am trying to create a commenting system for my site. A script is used to show massages (or alert) when the comment is submitted. I don't have enough knowledge in js to debug and fix this problem myself so I though I would ask here till I learn more about js.</p>
  
  <p>My script imports which are in the header:</p>
  
  <pre><code>&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" async&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/js/main.js" async&gt;&lt;/script&gt;
  </code></pre>
  
  <p>And my main.js script:</p>
  
  <pre><code>// Static comments
  jQuery(document).ready(function ($) {
    var $comments = $('.js-comments');
  
    $('#comment-form').submit(function () {
      var form = this;
  
      $(form).addClass('submitting');
      $('#comment-form-submit').html('Loading ...');
  
      $.ajax({
        type: $(this).attr('method'),
        url: $(this).attr('action'),
        data: $(this).serialize(),
        contentType: 'application/x-www-form-urlencoded',
        success: function (data) {
          $('#comment-form-submit').html('Submitted');
          $('.new-comment-form .js-notice').removeClass('notice--danger').addClass('notice--success');
          showAlert('&lt;p style="color:#47bd40"&gt;Thanks for your comment! It will show on the site once it has been approved.&lt;/p&gt;');
        },
        error: function (err) {
          console.log(err);
          $('#comment-form-submit').html('Submit Comment');
          $('.new-comment-form .js-notice').removeClass('notice--success').addClass('notice--danger');
          showAlert('&lt;p style="color:#e64848"&gt;Submission failed, please fill in all the required inputs.&lt;/p&gt;');
          $(form).removeClass('submitting');
        }
      });
  
      return false;
  
    });
  
    function showAlert(message) {
      $('.new-comment-form .js-notice').removeClass('hidden');
      $('.new-comment-form .js-notice-text').html(message);
    }
  });
  </code></pre>
  
  <p>My problem is, if I submit the comment, the script doesn't work, but if I waited for sometime and submitted again, it works just fine.</p>
  
  <p>I am guessing it has something to do with loading the scripts and running them, I saw some similar questions here but non of the answers fixed my problem.</p>