使用 jQuery 构建一个元素会给我一个错误

Building an element with jQuery gets me an error

本文关键字：一个 错误 元素 构建 使用 jQuery      更新时间：2023-09-26

我正在尝试使用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有基本的了解，因为我是通过实践学到的，所以我可能在这里弄错了什么。

我的本地计算机上的错误为：

发短信

index.html：45 [p， jquery： "1.11.0"， 构造函数： 函数， 选择器："， toArray： function， get： function...]

导航到 file:///C:/Users//Desktop/textonbackground/index.html？

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

我应该提到，我已经尝试了构建变量和附加文本（使用 .add 和 .after）的不同方法，但没有任何变化。我在这里错过了一些东西。

非常感谢您的帮助！

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

如果向其添加e.preventDefault()，文本将保留在应有的位置。

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

在线访问： http://jsfiddle.net/2y26rzot/3/

您的代码似乎在小提琴中工作正常，您只需要阻止表单提交的默认操作（如果它提交它将刷新页面，因此您的客户端更改，即使用 js 所做的更改，将不会显示）：

    $('button[type=submit]').click(function (e) {
        e.preventDefault();
        ...rest of code
    });

更新的小提琴

如果你想附加一个p元素，里面有一个文本，你应该做

var resultText = $('<p>'+typedText+'2</p>');
因为 .text（） 如果不传递任何参数（获取文本），则返回相关

元素的文本，或者如果传递参数（设置文本），则返回相关元素的 jquery 对象

相关文章：