javascript - 使用 jQuery 构建元素时出现错误

Question

我正在尝试使用 jQuery 创建一个元素，该元素包含用户单击“提交”按钮后输入字段中的文本。

这是我的 jsfiddle:http://jsfiddle.net/2y26rzot/

这是我的javascript:

    $(document).ready(function () {
        $('button[type=submit]').click(function () {
            var typedText = $('input[type=text]').val();
            var resultText = $('<p></p>').text(typedText+'2');
            $('section.result').append(resultText);
            console.log(typedText);
            alert(typedText);
            console.log(resultText);
            alert(resultText);
        });
    });

我包含了 bootstrap js 和 css，当然还有 jQuery。 问题发生在第一个和第二个警报之间的某处，但我不知道在哪里以及为什么。我对 jQuery 有基本的了解，因为我是边做边学的，所以我在这里可能会出错。

我本地机器上的错误是:

text

index.html:45 [p, jquery: "1.11.0", constructor: function, selector: "", toArray: function, get: function…]

Navigated to file:///C:/Users//Desktop/textonbackground/index.html?

当然，如果我删除带有 resultText 控制台日志和警报的最后两行，我不会收到错误，但文本仍然消失，我不明白为什么。有人可以向我解释一下吗，当然可以建议一些其他方法来实现我的目标，即从输入字段中获取信息并将其作为段落发布在页面上。

我应该提一下，我尝试了不同的方法来构建变量和附加文本(使用 .add 和 .after)，但没有任何改变。我在这里遗漏了一些东西。

非常感谢您的帮助!

Answer 1

文本消失是因为页面在表单提交后刷新。问题不在.text()

如果添加 e.preventDefault()对于它，文本将保留在它应该保留的位置。

如果您不想更改事件，可以使用不带 <button type="button"> 的常规按钮 ( form)

在这里在线:http://jsfiddle.net/2y26rzot/3/