title: Javascript event will not fire up after Ajax call
body: <p>I have a form (input, textarea and submit button) and I also have a list of items. I wrote the following script to:</p>
  
  <ol>
  <li>when I click a list item the textarea will show the list item text content</li>
  <li>on submit, ajax call will POST the form without refreshing the page </li>
  </ol>
  
  <p>the code works fine in the first time but then I will not be able to update the textarea when I click on a list item anymore (point #1 above will not work again).</p>
  
  <pre><code>var ul = document.getElementById('messages-list');
  
  var listItems = Array.prototype.slice.call(ul.querySelectorAll("li"));
  
  listItems.forEach(function (item) {
    item.addEventListener("click", function (event) {
      document.getElementById("message").textContent = this.textContent;
    });
  });
  
  $(function () {
  
    $('form').on('submit', function (e) {
  
      e.preventDefault();
  
      $.ajax({
        type: 'post',
        url: 'send_sms.php',
        data: $('form').serialize(),
        success: function () {
          alert('msg sent');
          $('textarea').val("");
          $('#phoneNumber1').val("");
        }
      });
  
    });
  
  });
  </code></pre>
  
  <p>Can you please help me fix this issue? Thanks in advance.</p>