javascript - jquery:与 insertAfter() 连接

Question

目的:点击“提交”后，将按钮下方文本框的内容添加到h3元素中。

所以我创建了一个变量contents，它从文本框中获取值。当我单击提交按钮时，它应该插入带有 contents 的 h3 元素。我不确定它是否与 jquery 中的连接有关，或者是否还有其他我在这里遗漏的东西。抱歉，我对 jquery 还是个新手。

$(document).ready(function() {
  var contents = $('#textInput').val();
  $('#submitBtn').click(function() {
    $("<h3>" + contents + "</h3>").insertAfter('#submitBtn');
  })
})

这里似乎有什么问题？

谢谢。

Answer 1

在单击按钮之前您将获得文本区域的值。您需要在事件处理程序中获取它(请注意，您可能还需要在事件上使用 preventDefault()，以防您的按钮正在提交表单或类似表单):

$(function() {
    $('#submitBtn').click(function(e) {
        e.preventDefault();
        $("<h3>" + $('#textInput').val() + "</h3>").insertAfter(this);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea id="textInput"></textarea>
<button id="submitBtn">Submit</button>