Ajax调用后，Javascript事件不会触发

Question

I have a form (input, textarea and submit button) and I also have a list of items. I wrote the following script to:

1. when I click a list item the textarea will show the list item text content
2. on submit, ajax call will POST the form without refreshing the page

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).

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("");
      }
    });

  });

});

Can you please help me fix this issue? Thanks in advance.

Answer 1

Try updating your forEach to use .val() when updating the textarea :

listItems.forEach(function (item) {
  item.addEventListener("click", function (event) {
    $('#message').val(this.textContent);
  });
});

As stated by others, .val() is the preferred method of getting / setting content - mixing this with textContent appears to cause the issue you're experiencing.