Question

我有一个表单（输入，textarea和提交按钮），我还有一个项目列表。我写了以下脚本：

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

代码在第一次正常工作，但是当我再次单击列表项时，我将无法更新textarea（上面的＃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

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

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

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

Ajax调用后，Javascript事件不会启动

1 个答案: