带有硬编码响应的 HTML5 jQuery 聊天框界面答案

【问题标题】：HTML5 jQuery Chat box interface with hardcoded response带有硬编码响应的 HTML5 jQuery 聊天框界面
【发布时间】：2016-04-30 22:28:19
【问题描述】：

我正在完成我的项目，只是想获得一个模拟的服务器响应，或者至少是来自用户输入的回显响应。整个想法是两条消息都应该显示在聊天框区域中。现在硬编码没有显示。这是我的 javascript/jQuery：

 <script>
$(document).ready(function(){
    $('#submitmsg')
        .bind('click', function(){
        var message = $('#usermsg').val();
        $('#chatbox').append('<p>' + message + '</p>');
        $('#usermsg').val('');
    });
        .bind('click', function(){
        var message = $('#usermsg').val();
        $('#chatbox').append('<p>' + message + '</p>');
        $('#usermsg').val('');
    });
  </script>

这是我的一些html：

<body>
<div id="wrapper">
  <div id="menu">
    <p class="welcome">Welcome</p>
    <p class="logout"><a id="exit" href="window.top.close();">Exit Chat</a></p>
    <div style="clear:both"></div>
</div>

<div id="chatbox">
    <p>Here's our chat data</p>
</div>

<form name="message">
    <input name="usermsg" type="text" id="usermsg" size="63" />
    <button type="button" id="submitmsg" value="send">Send</button>    
</form>

我正在尝试使用 .bind 方法来绑定初始消息以及对事件的编码响应，以便消息将同时输出到聊天框中，但它没有这样做。

【问题讨论】：

不清楚您要在这里实现什么，但您的代码存在一些问题。 1）您还没有关闭 document.ready 函数（缺少大括号），2）第二个绑定不绑定到任何东西，3）它与第一个绑定相同。您引用的“硬编码响应”在哪里？ jsfiddle.net/erresen/hwq69dew
我希望第二个绑定能像回显一样输出与第一个绑定相同的消息。或者计划 B 是键入要输出的预定消息。

标签： javascript jquery html chat

【解决方案1】：

这样的事情怎么样？

jsfiddle Demo

$(document).ready(function() {
  $('#submitmsg')
    .bind('click', function() {
      var message = $('#usermsg').val();
      $('#chatbox').append('<p>' + message + '</p>');
      $('#usermsg').val('');
      serverResponse(message);
    });
});

function serverResponse(message) {
  $('#chatbox').append('<p>Server: ' + message + '</p>');
}

<div id="menu">
  <p class="welcome">Welcome</p>
  <p class="logout"><a id="exit" href="javascript:window.top.close();">Exit Chat</a></p>
  <div style="clear:both"></div>
</div>
<div id="chatbox">
  <p>Here's our chat data</p>
</div>
<form name="message">
  <input name="usermsg" type="text" id="usermsg" size="63" />
  <button type="button" id="submitmsg" value="send">Send</button>
</form>

【讨论】：

那太好了，谢谢。我的退出按钮行为异常，您对此有何建议？
没问题。退出按钮的 href 缺少 javascript: 位。应该是：href="javascript:window.top.close();"
加上它现在似乎什么也没做
它应该关闭浏览器窗口。之前发生了什么“奇怪的行为”？
就像删除页面一样