Javascript jQuery聊天表单的问题

提前谢谢你的帮助

此项目是一个注册表单，将使用聊天系统在用户入职过程中收集用户的个人资料详细信息。这是我的第一个jQuery项目，所以我正在努力找出我的错误

我的jQuery应该将textarea中的值附加到#message feed div中，并将.message、.bubble和.user的CSS类应用到它创建的新元素中

但是，当我在文本区域中键入并单击submit时，它会闪烁我刚才在消息提要中键入的值，而没有样式，但它会立即消失

这种CSS结构的原因是.bot和.user类之间的互换性，这取决于它是网站向用户提出的问题，还是用户对问题的回答

这里是一个链接，但是它的加载方式与我的本地机器上的加载方式非常不同（JSFIDLE显示错误）

HTML

jQuery

$(document).ready(function() {

    $('.submit-response').click(function() {

        var $newMessage = $('textarea[name=text-response]').val()

        $('#message-feed').append($newMessage, 'message', 'bubble', 'user');

    });
});

---

那边有两个问题：

1/您没有阻止事件默认行为。这意味着每当您单击作为提交输入的按钮时，它都会发送一个POST请求。因此页面将更改。要防止此情况，请执行以下操作：

$('.submit-response').click(function() {
    var $newMessage = $('textarea[name=text-response]').val();
    $('#message-feed').append($newMessage, 'message', 'bubble', 'user');
});

应成为：

$('.submit-response').click(function(event) {
    event.preventDefault(event);
    var $newMessage = $('textarea[name=text-response]').val();
    $('#message-feed').append($newMessage, 'message', 'bubble', 'user');
});

$('.submit-response').click(function(event) {
    event.preventDefault(event);
    var $newMessageText = $('textarea[name=text-response]').val(),
        $newMessage = $('<span class="message bubble user">' + $newMessageText + '</span>');

    $('#message-feed').append($newMessage);
});

2/您实际上并没有添加类。

$。append

附加元素，而不是类。因此：

$('.submit-response').click(function(event) {
    event.preventDefault(event);
    var $newMessage = $('textarea[name=text-response]').val()
    $('#message-feed').append($newMessage, 'message', 'bubble', 'user');
});

应成为：

$('.submit-response').click(function(event) {
    event.preventDefault(event);
    var $newMessage = $('textarea[name=text-response]').val();
    $('#message-feed').append($newMessage, 'message', 'bubble', 'user');
});

$('.submit-response').click(function(event) {
    event.preventDefault(event);
    var $newMessageText = $('textarea[name=text-response]').val(),
        $newMessage = $('<span class="message bubble user">' + $newMessageText + '</span>');

    $('#message-feed').append($newMessage);
});

$（'.submit response'）。单击（函数（事件）{
事件。预防违约（事件）；
var$newMessageText=$（'textarea[name=text-response]'）。val（），
$newMessage=$（''+$newMessageText+''）；
$（'#消息提要'）。追加（$newMessage）；
});

现在很明显，它不必是一个跨度，它可以是其他任何东西，它仍然必须是一个元素

---

此外，这只是解决了前端的问题。您需要AJAX将帖子发送到服务器端并在不刷新/离开页面的情况下获取数据。但这是另一个主题。

您没有说您遇到了什么问题。HTML中的问题是没有按照您希望的方式更改，还是页面在更改时发生了更改你提交了？或者两者都提交了？你忘记了描述问题的部分。你到底在问我们什么？抱歉，伙计们，刚刚修改了帖子以包含问题内容。非常感谢你们的解释和修改，它们非常有用。现在在消息提要中显示了附件，但它们说的是“未定义”，而不是ac提交的实际文本。你知道我哪里可能出错吗？