Question

我有一个引导面板（聊天区），我在那里显示聊天消息。因此，一旦用户点击“发送”按钮，该消息就应显示在聊天区域中。

这是我的聊天区域的html代码。

<body>
  <nav class="navbar navbar-default">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="">Tinychat</a>
      </div>
      <form class="navbar-form navbar-right" action="" method="post">
        <div class="form-group">
          <span>Hi, </span>
          <input class="form-control" type="text" name="username" value="" placeholder="Enter any username">
        </div>
        <button type="submit" name="submit" class="btn btn-primary">Use</button>
      </form>
    </div>
  </nav>

  <div class="container">
    <div class="row">
      <div class="col-md-9">
        <div class="panel panel-primary">
          <header class="panel-heading">
            <p class="panel-title">Chat messages</p>
          </header>
          <div class="panel-body fixed-panel" id="chat-area">
            <div class="row">
                <div class="chat-message chat-left">
                  <p class="message-heading">harry</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
                </div>
            </div>
            <div class="row">
                <div class="chat-message chat-right pull-right">
                  <p class="message-heading">tom</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
                </div>
            </div>
            <div class="row">
                <div class="chat-message chat-left">
                  <p class="message-heading">harry</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
                </div>
            </div>
            <div class="row">
                <div class="chat-message chat-left">
                  <p class="message-heading">harry</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
                </div>
            </div>
            <div class="row">
                <div class="chat-message chat-right pull-right">
                  <p class="message-heading">tom</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
                </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="panel panel-success">
          <header class="panel-heading">
            <p class="panel-title">User list</p>
          </header>
          <div class="panel-body fixed-panel">
            <ul class="list-unstyled user-list">
              <li>tom</li>
              <li>harry</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-md-9">
        <form class="" action="" method="post">
          <div class="form-group">
            <textarea class="form-control" id="message" rows="2" style="resize:none"></textarea>
          </div>
          <button type="submit" id="send" class="btn btn-primary pull-right">Send</button>
        </form>
      </div>
      <div class="col-md-3">

      </div>
    </div>
  </div>


  <!-- jquery -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="apps.js"></script>
</body>

这是我的jquery代码。

var main = function() {
   $("#send").click(function() {
   var message = $("#message").val();
   var addMessage = "<div class='row'><div class='chat-message chat-right pull-right'><p class='message-heading'>tom</p><p>" + message + "</p></div></div>";
   $("#chat-area").append(addMessage);
});

$("#message").keyup(function() {
   var messageLength = $("#message").val().length;

   if(messageLength <= 0)
     $("#send").addClass("disabled");
   else {
     $("#send").removeClass("disabled");
   }

});

$("#send").addClass("disabled");
}

$(document).ready(main);

send是按钮，消息是textarea。

问题是，我无法将此addMessage附加到聊天区域。此外，当我在chrome中调试时，我看到该部分被追加，但是一旦该函数返回，该部分就会消失。

请帮忙。

谢谢！

Answer 1

这对我有用：JSFiddle

这是html代码：

<div class="panel-body fixed-panel" id="chat-area">
            <div class="row">
                <div class="chat-message chat-left">
                  <p class="message-heading">harry</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
                </div>
            </div>
            <div class="row">
                <div class="chat-message chat-right pull-right">
                  <p class="message-heading">tom</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
                </div>
            </div>
            <div class="row">
                <div class="chat-message chat-left">
                  <p class="message-heading">harry</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
                </div>
            </div>
            <div class="row">
                <div class="chat-message chat-left">
                  <p class="message-heading">harry</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
                </div>
            </div>
            <div class="row">
                <div class="chat-message chat-right pull-right">
                  <p class="message-heading">tom</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
                </div>
            </div>
          </div>
<input type="text" id="message"><button id="send">Send</button>

这就是jquery：

$("#send").click(function() {
var message = $("#message").val();
var addMessage = "<div class='row'><div class='chat-message chat-right pull-right'><p class='message-heading'>tom</p><p>" + message + "</p></div></div>";
$("#chat-area").append(addMessage);
});

但这只适用于客户端，因此只要您刷新页面，它们就会消失。所以你应该寻找一个服务器端解决方案来构建你的聊天应用程序。

Answer 2

只需添加此

$('#send').on('click', function(event){ 
    event.preventDefault();
    //rest of the code
});

或

$("#send").click(function(event) {
event.preventDefault();
    //rest of the code
});

阻止表单提交或超链接导航。当你想把东西带回服务器后端时，这也可以让你更好地控制

无法使用jquery追加元素

2 个答案: