Ajax 调用后不会触发 Javascript 事件

Question

我有一个表单(输入、文本区域和提交按钮)，还有一个项目列表。我编写了以下脚本:

1. 当我点击列表项时，文本区域将显示列表项文本内容
2. 提交时，ajax 调用将 POST 表单而不刷新页面

代码第一次工作正常，但当我再单击列表项时，我将无法更新文本区域(上面的#1 点将不再工作)。

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

  });

});

你能帮我解决这个问题吗？提前致谢。

Answer 1

尝试更新 forEach 以在更新 textarea 时使用 .val():

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

正如其他人所述，.val() 是获取/设置内容的首选方法 - 将其与 textContent 混合似乎会导致您遇到的问题。