为什么当我按回车键添加评论时，我的页面会返回登录页面

Question

I have created an Instagram clone and all of my functionality (Like photos, add comments) is working fine when in jsbin: http://jsbin.com/tecaha/edit?js,output我创建了一个 Instagram 克隆，并且我的所有功能（如照片、添加评论）在 jsbin 中都运行良好： http ://jsbin.com/tecaha/edit?js,output

For example, when I type a comment and press enter, the comment is added.例如，当我输入评论并按回车键时，会添加评论。 However, when I copy this code into Atom and upload to my server, or use my local environment, when I press enter the page just loops back to the login.但是，当我将此代码复制到 Atom 并上传到我的服务器或使用我的本地环境时，当我按 Enter 时，页面只会循环回到登录状态。

Can someone tell me what is wrong here?有人能告诉我这里有什么问题吗？

Here is the link to the page on the server http://jshuadvd.com/instagram/feed.html这是服务器上页面的链接http://jshuadvd.com/instagram/feed.html

HTML HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>
  <body>

    <header>
      <div class="top">        
        <ul>
          <li><i class="fa fa-home fa-2x"></i>
          </li>
          <li id="logo">
            <img src="http://i.imgur.com/SmdPZ6T.png" />
          </li>
          <li id="profile-photo">
            <img src="https://scontent-sea1-1.cdninstagram.com/hphotos-xaf1/t51.2885-19/10731946_1517235648523785_1216221661_a.jpg" />
            <p class="username">username</p>
          </li>
        </ul>
      </div>
    </header>
    <div id="container">
      <main>
        <div id="feed-container">
            <ul id="images">





            </ul>
          </div>         
      </main>
      </div>
  </body>
</html>

CSS CSS

* {
  margin: 0px;
  padding: 0px;
}
body {
  font-family: "proxima-nova", "Helvetica Neue", Arial, Helvetica, sans-serif;
}
ul {
  list-style: none;
}
li {
  list-style: none;
}
#container {
  margin: 0 auto;
  display: block;
}
header {
  margin: 0 auto;
  display: block;
  background-color: #3E6D93;
  height: 50px;
}
.top {
  background: #467ea6;
  background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.01, #467ea6), to(#27608c));
  background: -webkit-linear-gradient(#467ea6 1%, #27608c 100%);
  background: -moz-linear-gradient(#467ea6 1%, #27608c 100%);
  background: -o-linear-gradient(#467ea6 1%, #27608c 100%);
  background: linear-gradient(#467ea6 1%, #27608c 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#467ea6', endColorstr='#27608c', GradientType=0);
  width: 100%;
}
.top li {
  display: inline-block;
  margin: 0 auto;
}
#home-button, .fa-home {
  float: left;
  background-color: #305F87;
  color: #ccc;
  padding: 7px;
  margin-left: 200px;
  width: 35px;
}
.fa-home {
  padding-left: 12px;
}
#logo img {
  float: right;
  width: 110px;
  margin-left: 400px;
  padding: 6px;
}
#profile-photo  {
  float: right;
  margin-right: 200px;
  padding: 10px;
  border-left: 1px solid #305F87;
  border-right: 1px solid #305F87;
  width: auto;
}
#profile-photo img  {
  width: 30px;
  height: 30px;
  border-radius: 5px;
}
#profile-photo p {
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  float: right;
  margin-left: 10px;
  padding: 5px;

}
#feed-container {
  background-color: #DFDFDF;
  width: 650px;
  height: auto;
  margin: 0 auto;
  display: block;
}
#images {
  margin: 0 auto;
  display: block;
  padding-top: 50px;
  padding-bottom: 30px;
}
#images img {
  margin: 0 auto;
  display: block;
  width: 550px;
  height: 550px;
}
.below-image {
  margin: 0 auto;
  display: block;
  width: 550px;
  height: 52px;
  background-color: #fff;
  border: 1px solid #ccc;
}
.like {
  float: left;
}
.fa-heart {
  color: #5a5a5a;
  padding: 10px;
  border-right: 1px solid #ccc;
}
.liked {
  color: #ff0000;
}
.image-info {
  float: left;
  text-align: left;
  width: 437px;
  height: 52px;
  border-right: 1px solid #ccc;
}
.image-info p {
  color: #467ea6;
  font-weight: bold;
  padding-top: 15px;
  padding-left: 20px;
  float: left;
}
.more {
  float: right;
  color: #5a5a5a;
}
.more, .info {
  display: inline-block;
  font-size: 45px;
  color: #5a5a5a;
  padding: 0 5px;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  outline: none;
}
.clear {
  clear: both;
}

.comment-container {
  width: 550px;
  margin-bottom: 65px;  
}

.add-a-comment {
  margin: 0 auto;
  display: block;
  background-color: #fff;
  width: 550px;
  height: auto;
  margin-bottom: 50px;
}
.add-a-comment p {
  margin: 0 auto;
  display: block;
}
.add-a-comment input[type=text] {
  width: 420px;
  border: 1px solid #ccc;
  color: #4f4f4f;
  font-size: 16px;
  border: 0;
  bottom: 40px;
  padding: 15px;
  outline: none;
  background: transparent;
}
input, select, textarea{
  color: #f00;
}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}
.inserted {
  cursor: pointer;
}
.post-liked .fa-heart {
   color: #f00;
}
.comment-click {
  width: 30px;
  text-align: center;
  border: 1px solid #ccc;
  color: #4f4f4f;
  font-size: 16px;
  border: 0;
  bottom: 40px; 
  padding: 15px;
  outline: none;
  background: transparent;
  cursor: pointer;
  float: right;
}
.comment-list {
  width: 400px;
  text-align: left;  
}
.comment-list li{
  margin-left: 20px;
  color: #4f4f4f;
  font-weight: 600;
  padding-top: 5px;
}
.fixed-container {
  height: 250px;
  width: 530px;
  overflow: scroll; 
} 
.un {
  color: #467ea6;
}

JavaScript / jQuery JavaScript / jQuery

// Variable of html strings

var bottom = '<div class="below-image">' +
    '<div class="like">' +
    '<i class="fa fa-heart fa-2x"></i>' +
    '</div>' +
    '<div class="image-info">' +
    '<p>User Info</p>' +
    '</div>' +
    '<div class="more">' +
    '<button class="info">···</button>' +
    '</div>' +
    '<div class="clear"></div>' +
    '</div>' +
    '<div class="add-a-comment">' +

    '<div class="comment-container">' + 
    '<form class="comment" action="index.html" method="post">' +
    '<input id="enter" type="text" name="newcomment" value="" autocomplete="off" placeholder="Add a comment...">' +
    '<button class="comment-click"></button>' +
    '</form>' +
    '<ul class="comment-list fixed-container">' +
    '</ul>' +
    '</div>' +
    '</div>' +
    '</li>' +
   '</div>' +
    '</div>';


// GET Request to grab the data from the JSON file
$(document).ready(function() {
  var jsonURL = "https://codesmith-precourse.firebaseio.com/instagram/-JqL35o8u6t3dTQaFXSV.json";
  var newImage = "http://yourbizrules.com/wp-content/uploads/2014/08/Staying-Motivated.jpg";

  $.getJSON(jsonURL, function(json) {
    var imgList = "";

    $.each(json, function (i) {
        imgList += '<div class="post"><li><img class="inserted" src= " ' + json[i] + ' ">' + bottom;

    });


    $('#images').append(imgList);


// Like Photos
    $('#images').on('click', '.inserted', function() {
//  $('.fa-heart').toggleClass('liked');
      var post_block = $(this).parents('.post').first();
      post_block.toggleClass('post-liked');
    });

// Add Comment
    $('.comment-click').on('click', function() {
      var userName = "Username";
      //debugger;
      //console.log("username", userName, $(userName));

      var userComment = $(this).siblings('input[name=newcomment]').val();
        $(this).parent().siblings('.comment-list').append("<li>" + userName + ' ' + userComment + "</li>");

      $.each($('input'), function () {
    $(this).val("");

      });      
    });
  });
});

Answer 1

because your comment form's action points to index.html因为您的评论表单的操作指向 index.html

your index.html asks for login: http://jshuadvd.com/instagram/index.html您的 index.html 要求登录： http : //jshuadvd.com/instagram/index.html

<form class="comment" action="index.html" method="post">
---
---
---
</form>

Answer 2

The issue you have is that the form gets submitted when the user presses the enter key, so how to fix that is to hook the onSubmit event of the form.您遇到的问题是当用户按下回车键时表单被提交，因此如何解决这个问题是挂钩表单的onSubmit事件。

To make this work, you need to apply these two changes:要完成这项工作，您需要应用以下两个更改：

1. convert your button to a submit button so that clicking the button will submit the form 1.将您的按钮转换为提交按钮，以便单击该按钮将提交表单

<button class="comment-click" type="submit"></button>

2. Hook the on submit event, which will be called either when the user presses enter or the user clicks the submit button : 2. 钩住 on submit 事件，当用户按下回车键或用户点击提交按钮时，该事件将被调用：

$('form.comment').on('submit', function(evt) {
    var userName = "Username";

    // note: "this" references the <form> element!
    var userComment = $(this).find('input[name=newcomment]').val();
    $(this).siblings('.comment-list').append("<li>" + userName + ' ' + userComment + "</li>");
    $(this).find('input[name=newcomment]').val("");

    // prevents the standard behaviour
    evt.preventDefault();
    return false;
});

3. remove your old code ie the $('.comment-click').on('click', function() { ... 3. 删除旧代码，即$('.comment-click').on('click', function() { ...

Also you should escape the user's input to prevent HTML/JS injection:您还应该转义用户的输入以防止 HTML/JS 注入：

$(this).siblings('.comment-list').append($("<li></li>").text(userName + ' ' + userComment));

You can try this by entering something like <h1>big!您可以通过输入类似<h1>big! on your current implementation.关于您当前的实施。

为什么当我按回车键添加评论时，我的页面会返回登录页面

问题描述

2 个解决方案

解决方案1
1 2015-10-04 21:59:35

解决方案2
1 已采纳 2015-10-04 22:06:19

为什么当我按回车键添加评论时，我的页面会返回登录页面

问题描述

2 个解决方案

解决方案1 1 2015-10-04 21:59:35

解决方案2 1 已采纳 2015-10-04 22:06:19

解决方案1
1 2015-10-04 21:59:35

解决方案2
1 已采纳 2015-10-04 22:06:19