Question

我正在尝试为演示创建一个非常简单的评论表单;在文本字段中添加一些文本，提交，向列表添加值。当我使用按钮和点击事件时，它可以工作：

<script>
$(".add-comment").click(function (e) {
var add = $('#comment-body').val();
$('.comments').append('<li>' + '<h4>Name</h4> ' + add + '</li>');
});
</script>

<form>
<input type="text" id="comment-body" />
<button type="button" class="add-comment">Submit</button>
</form>
<ol class="comments"></ol>

但这是一个移动演示，所以我根本不想要一个按钮。我只想在用户点击返回键时发布评论。我尝试删除按钮，并像这样编辑脚本，但它不起作用：

$("form").submit(function (e) {
var add = $('#comment-body').val();
$('.comments').append('<li>' + '<h4>Name</h4> ' + add + '</li>');
});

任何想法我做错了什么？

Answer 1

在提交页面时会重新加载，因为您将页面提交到服务器，因此您有2个选项：

1）重新加载页面时（在服务器上）重新加载所有注释 2）使用异步提交（AJAX）并在回调中添加注释

Answer 2

改变这个：

<button type="button" class="add-comment">Submit</button>

到此：

<button type="submit" class="add-comment">Submit</button>

type="submit"将提交表单。

此外，您的表单没有action属性，因此会提交到您当前的页面。

Answer 3

好的，对于任何在将来偶然发现这种情况的人来说，有一个更容易实现的方法。您需要做的就是检测某人是否按下了回车键。你根本不需要使用表格。这是：

<ol class="comments"></ol>     
<input type="text" id="comment-body" placeholder="add comment here" />          
<script>     
$('#comment-body').keydown(function (e){     
if(e.keyCode == 13){     
var add = $('#comment-body').val();     
$('.comments').append('<li>' + '<h4>Name</h4> ' + add + '</li>');     
}})     
</script>

jQuery将文本字段的值附加到表单提交列表中

3 个答案: