jquery - 使用 .append() 或 .html() 插入时，通过 .val() 从文本表单检索的文本消失

Question

我正在尝试学习如何一起使用表单和 jQuery。

我正在尝试将文本输入到文本表单中，并将其附加或插入到另一个元素中

我创建了一个jsFiddle:http://jsfiddle.net/B9weu/5/

出于某种原因，我使用 .val() 检索到的文本在其附加到的元素中出现了一瞬间，然后消失了。这是为什么？

通过简单地使用 .val() 作为 .submit() 事件中的处理程序来使用表单，我是否走在正确的道路上？

代码:

    <form id="target">
   <div>
    <textarea id="blogentry" name="d" rows="8" cols="40">4</textarea>
  </div>
  <div>
    <input type="submit" name="g" value="Submit" id="g" />
  </div>
</form>

<script>
$('#target').submit(function() {
  var blogtext = $('#blogentry').val();
  $('#printbodytexthere').append('<p>' + blogtext + '</p>');
});
</script>

<div id="printbodytexthere">
</div>

Answer 1

您的表单正在提交(页面刷新)

使用:event.preventDefault();来防止默认的提交行为

$('#target').submit(function( e ) {
    e.preventDefault();
  var blogtext = $('#blogentry').val();
  $('#printbodytexthere').append('<p>' + blogtext + '</p>');
});

文档:http://api.jquery.com/event.preventDefault/