jQuery聊天表单问题

Question

提前感谢您的帮助。

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

我的jQuery应该将textarea中的值附加到＃message-feed div并应用 .message ， .bubble 和 .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

那边有两个问题：

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发送到服务器端并获取数据而不刷新/离开页面。但这是另一个话题。