jQuery 채팅 양식 관련 문제

Question

미리 감사드립니다.

이 프로젝트는 채팅 시스템을 사용하여 온 보딩 프로세스 중에 사용자 프로필 세부 정보를 수집하는 가입 양식입니다. 이것은 내 첫 번째 jQuery 프로젝트이므로 실수를 저지르기 위해 고심하고 있습니다.

내 jQuery를이 # 메시지 공급 사업부에 텍스트 영역의 값을 추가하고 생성하는 새로운 요소로 .message, .bubble 및 .user의 CSS 클래스를 적용해야합니다.

그러나 텍스트 영역에 입력하고 제출을 클릭하면 메시지 피드에 스타일을 지정하지 않고 방금 입력 한 값이 깜박이지만 즉시 사라집니다. 이 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); 
}); 

를 이제 분명히이 범위를 될 필요가 없습니다, 그것은 무엇 때문일 수 있습니다. 여전히 요소가되어야합니다.

또한 프런트 엔드에서 발생한 문제 만 해결됩니다. POST를 서버 측에 보내고 페이지를 새로 고치거나 떠나지 않고 데이터를 가져 오려면 AJAX가 필요합니다. 그러나 그것은 또 다른 주제입니다.