jQuery聊天表单的问题

Question

提前感谢您的帮助。

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

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

但是，当我在文本区域中输入并单击提交时，它会闪烁我刚刚输入的值，而消息源中没有任何样式，但它会立即消失。

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

这是JSFiddle 的链接，但它的加载方式与我的本地机器上的加载方式截然不同（JSFiddle 显示错误。

HTML

<div id="container">

    <div id="message-feed">
        <h1>Let&#39;s get to know you a little bit more&hellip;</h1>
    </div>

    <form method="POST">
        <div id="text-response">
        <textarea id="text-response" placeholder="Type in here&hellip;"></textarea>
        </div>
        <input type="submit" class="submit-response">
    </form>

</div>

CSS

#container {
width: 320px;
height: 480px;
background-color: #fff;
position:absolute;
left:50%;
top:50%;
margin:-240px 0 0 -160px;
}

#message-feed {
width: 100%;
height: 100%;
margin: auto;
overflow-y: scroll;
}

.message {
padding: 0px 15px 15px 15px;
width: 90%;
}

.message:after {
content:"";
display: block;
clear: both;
}

.bubble {
border: 0.5px solid #005393;
max-width: 80%;
padding: 10px;
}

.bot {
color: #005393;
float: left;
border-radius: 12px 12px 12px 0px;
}

.user {
float: right;
background-color: #005393;
border-radius: 12px 12px 0px 12px;
color: #fff;
}

#text-response {
height: 23px;
width: 220px;
border-top: 1px solid #eee;
background-color: #fff;
float: left;
}

textarea {
height: 20px;
width: 220px;
float: left;
resize: none;
border: none;
padding: 10px;
line-height: 22px;
font-family: 'Roboto', sans-serif;
font-weight: 200;
letter-spacing: 1px;
font-size: 15px;
outline: none;
overflow: auto;
}

.submit-response {
height: 45px;
width: 80px;
background-color: #005393;
color: #fff;
float: right;
text-align: center;
line-height: 42px;
font-family: 'Roboto', sans-serif;
font-weight: 200;
letter-spacing: 1px;
font-size: 15px;
outline: none;
border: 0;
}

.submit-response:hover {
opacity: 0.5;
}

jQuery

$(document).ready(function() {

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

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

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

    });
});

Answer 1

那里有2个问题：

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');
});

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 $newMessageText = $('textarea[name=text-response]').val(),
        $newMessage = $('<span class="message bubble user">' + $newMessageText + '</span>');

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

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

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