使用 JavaScript 或 jQuery 添加输入时，如果刷新页面，其值将被复制到其他输入答案

【问题标题】：When adding an input using JavaScript or jQuery, its value gets copied to other inputs if the page is refreshed使用 JavaScript 或 jQuery 添加输入时，如果刷新页面，其值将被复制到其他输入
【发布时间】：2012-09-07 03:00:56
【问题描述】：

当我使用 jQuery 添加<input> 时，每当刷新页面时，新的input 的值就会被复制到页面的预先存在的输入中！

在 Firefox 中运行此页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="Scripts/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('<input />').attr({ 'type': 'text' }).val(2).appendTo($('#cart'));
        })
    </script>
</head>
<body>
    <div id="cart">
    </div>
    <input type="text" id="afe" />
</body>
</html>

首次加载时，原来的input 为空白，jQuery 添加的input 的值为2。

现在按 F5。两个输入都将显示值2！

发生了什么事？

【问题讨论】：

标签： javascript jquery firefox input

【解决方案1】：

看起来 Firefox 的自动完成功能有点混乱。 Chrome 不这样做。
请参阅 jsfiddle.net/TAGkR。

初始页面加载后，在 Firefox (15.01) 中如下所示：

但是刷新页面/iframe，它看起来像这样！

这可能是 Firefox 中的一个错误。以下是您可以解决的一些方法：

将第一个输入设置为autocomplete="off"。
例如：<input type="text" id="afe" autocomplete="off" />

见this Fiddle。

让 jQuery 在原始输入之后物理添加新输入。
例如：

<input type="text" id="afe" />
<div id="cart">
    <!-- JavaScript/jQuery inserts input here. -->
</div>

见this Fiddle。

【讨论】：

谢谢，关闭自动完成功能做得很好！
@BrockAdams 您可能应该将 JSFiddle 中的相关 javascript 放入您的答案中。答案应该是自给自足的。如果到 JSfiddle 的链接失效（并且他们的链接之前已经失效很多），那么您的答案不再包含答案。

【解决方案2】：

该问题仅适用于您的cart 之后的<input> 标签。每次刷新时，它将一次将它们的值更新为 jQuery 中的值。看看这个例子：http://jsfiddle.net/TAGkR/26/

我尝试使用纯 Javascript 来查看 jQuery 是否可能存在一些错误，但同样的错误仍然存在，如下所示：http://jsfiddle.net/TAGkR/28/

编辑：在这一点下方是我的旧答案，但我会保持原样，以使下面的评论保持上下文。

我很不清楚你想要完成什么。如果您试图让新文本框获取另一个文本框的值，我只需将 val 函数包装在您当前的 Javascript 周围。

$(function() {
    $('#afe').val(
    $('<input />').attr({
        'type': 'text'
    }).val(2).appendTo($('#cart')).val());
});

如果你想在之后的某个时间得到这个值，我会这样得到它：

$(function() {
    $('<input />').attr({
        'type': 'text'
    }).val(2).appendTo($('#cart'));

    $('#afe').val($('#cart input').val());
});

如果您想澄清更多，我很乐意回答。这正是我从你的描述中得到的。

【讨论】：

实际上，他在报告错误行为，我只是重复了这个问题；更多。
谢谢，我只是不想出现这种错误行为。购物车是我正在制作的购物车，页面上的文本框是我标题中的搜索框。
+1 用于纯 JS 测试用例。您不需要仅仅为了评论而保留旧答案！如果他们愿意，人们可以从编辑历史中分辨出上下文。