使用JavaScript或jQuery添加输入时，如果刷新页面，则会将其值复制到其他输入
[英]When adding an input using JavaScript or jQuery, its value gets copied to other inputs if the page is refreshed
问题描述
When I use jQuery to add an <input> , the new input 's value gets copied to the page's preexisting input, whenever the page is refreshed! 
当我使用jQuery添加<input>时，只要刷新页面，新input的值就会被复制到页面的预先存在的输入中！
Run this page in Firefox: 在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>
When it first loads, the original input will be blank and the input added by jQuery will have a value of 2 . 首次加载时，原始input将为空白，jQuery添加的input的值为2 。
Now press F5 . 现在按F5 。 Both inputs will show the value 2 ! 两个输入都将显示值2 ！
What's going on? 这是怎么回事？
2 个解决方案
解决方案1
4 已采纳 2012-09-07 04:40:43
It looks like Firefox's autocomplete is getting confused. 看起来Firefox的自动完成程序变得混乱。 Chrome does not do this. Chrome不会这样做。
See jsfiddle.net/TAGkR . 见jsfiddle.net/TAGkR 。
After the initial page load , it looks like this in Firefox (15.01): 在初始页面加载后 ，它在Firefox（15.01）中看起来像这样：
But refresh the page/iframe and it looks like this! 但刷新页面/ iframe ，它看起来像这样！
This is probably a bug in Firefox. 这可能是Firefox中的一个错误。 Here's some ways you can work around it: 以下是一些可以解决它的方法：
Set the first input to
autocomplete="off".将第一个输入设置为autocomplete="off"。
EG:<input type="text" id="afe" autocomplete="off" />EG： <input type="text" id="afe" autocomplete="off" />See this Fiddle .
看到这个小提琴 。 Have jQuery add the new input physically after the original one.
让jQuery在原始输入之后添加新的输入。
EG:例如： <input type="text" id="afe" /> <div id="cart"> <!-- JavaScript/jQuery inserts input here. --> </div>See this Fiddle .
看到这个小提琴 。
解决方案2
1 2012-09-07 03:13:13
The issue only applies to <input> tags which are after your cart . 该问题仅适用于cart后面的<input>标签。 It will update their values to the value in jQuery one at a time upon each refresh. 每次刷新时，它会一次一个地将它们的值更新为jQuery中的值。 Check out this example: http://jsfiddle.net/TAGkR/26/ 看看这个例子： http ： //jsfiddle.net/TAGkR/26/
I tried using pure Javascript to see if there might have been some error with jQuery, but the same error persists as seen here: http://jsfiddle.net/TAGkR/28/ 我尝试使用纯Javascript来查看jQuery是否存在某些错误，但是同样的错误仍然存在，如下所示： http ： //jsfiddle.net/TAGkR/28/
EDIT : Below this point was my old un-informed answer but I will leave it intact to make the comment below stay in context.
I'm very unclear as to what you're trying to accomplish. 我不清楚你想要完成什么。 If you're trying to make the new textbox get the value of the other textbox, I would just wrap the val function around your current Javascript. 如果您正在尝试使新文本框获取其他文本框的值，我只需将val函数包装在您当前的Javascript周围。
$(function() {
$('#afe').val(
$('<input />').attr({
'type': 'text'
}).val(2).appendTo($('#cart')).val());
});
If you want to get the value sometime after then I would get it like this: 如果你想在那之后的某个时间获得价值，我会得到这样的：
$(function() {
$('<input />').attr({
'type': 'text'
}).val(2).appendTo($('#cart'));
$('#afe').val($('#cart input').val());
});
If you would like to clarify more I would be happy to answer. 如果您想澄清更多，我很乐意回答。 This is just what I got from what you described. 这正是我从你描述的内容中得到的。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.