jQuery.val() 不适用于 <input> 标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17170364/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery.val() doesn't work on an <input> tag
提问by durje
After typing something in an input, and clicking on the button, ".val()" return an empty value, any idea why?
在输入中输入内容并单击按钮后，“.val()”返回一个空值，知道为什么吗？
HTML CODE:
HTML代码：
<div class="mainClass">
<div class="class1" >
<div class="class2">
<h3>Settings 1</h3>
<label>
<span>Text 1:</span>
<input type="text" name="text">
</label>
<label>
<span>Text 2:</span>
<input type="text" name="text2">
</label>
</div>
</div>
<div class="class3" >
<div class="class4">
<h3>Settings 2</h3>
<label>
<span>Text 1:</span>
<input type="text" name="text">
</label>
<label>
<span>Text 2:</span>
<input type="text" name="text2">
</label>
</div>
</div>
</div>
<button id="Go" class="go" >GO </button>
JAVASCRIPT CODE:
爪哇代码：
$('#Go').on('click', function() {
alert($('.class1 input').val()); //return an empty value
$('.class1 input').val("test");
alert($('.class1 input').val()); //return test
});
EDIT:
编辑：
Even this doesnt work, and here i have only one input so I can't type in the wrong one:
即使这也不起作用，这里我只有一个输入，所以我不能输入错误的输入：
<div class="mainClass">
<div class="class1" >
<div class="class2">
<h3>Settings 1</h3>
<label>
<span>Text 1:</span>
<input type="text" name="text">
</label>
</div>
</div>
</div>
<button id="Go" class="go" >GO </button>
EDIT 2: I found a beginning of the problem...
编辑2：我发现了问题的开始......
When I am doing that:
当我这样做时：
$('.class1 input').each(function () {
alert($(this).attr('name') + " value:" +$(this).val() );
});
I get two "alert" like this:
我收到两个这样的“警报”：
text value:
text value:myinputText
So two created for one in my HTML, the first one is empty and the second one work well!
Looking closely to my page, i found that all element are duplicated( <select,field, input...)
所以在我的 HTML 中为一个创建了两个，第一个是空的，第二个运行良好！仔细查看我的页面，我发现所有元素都是重复的（<select,field, input...）
Any idea how is that possible? Am i calling two time my html file? And all my code is in a popup( I don't know if it can help) (I am new in Javascript and jQuery)
知道这怎么可能吗？我要调用两次我的 html 文件吗？我所有的代码都在一个弹出窗口中（我不知道它是否有帮助）（我是 Javascript 和 jQuery 新手）
Thanks
谢谢
回答by Denys Séguret
There's more than one element matching '.class1 input'. You probably didn't fill the first one of the set.
匹配的元素不止一个'.class1 input'。你可能没有填写第一个。
From the documentation:
从文档：
Get the current value of the first element in the set of matched elements.
获取匹配元素集中第一个元素的当前值。
While val('text')fills all matching elements :
虽然val('text')填充所有匹配元素：
Set the value of each element in the set of matched elements
设置匹配元素集中每个元素的值
Which is why you see something in your second alert.
这就是为什么您会在第二个警报中看到某些内容。
You'd better use a more selective selector. Usually we use an id, or a name if a form is used to send the values to a server.
您最好使用更具选择性的选择器。如果使用表单将值发送到服务器，通常我们使用 id 或名称。
回答by Thomas Junk
$('.class1 input').val()
refers to two elements
指两个元素
<input type="text" name="text">
and
和
<input type="text" name="text2">
回答by epascarello
You have more than one element that matches.
您有多个匹配的元素。
From the jQuery docs
.val()Get the current value of the first elementin the set of matched elements or set the value of every matched element.
.val()获取匹配元素集中第一个元素的当前值或设置每个匹配元素的值。
You are only getting the first element of the matched set as the docs state. If you want all the values, you need to loop over the set.
您只获得匹配集合的第一个元素作为文档状态。如果你想要所有的值，你需要遍历集合。
回答by Ganesh Kamath - 'Code Frenzy'
Wrap your Jquery code around a Document-readyblock:
将您的 Jquery 代码包裹在一个Document-ready块周围：
$('document').ready(function(){});
like so:
像这样：
$('document').ready(function(){
$('#Go').on('click', function() {
alert($('.class1 input').val()); //return an empty value
$('.class1 input').val("test");
alert($('.class1 input').val()); //return test
});
});
Even with so much help from google search and Stackoverflow, it took us 1 hour to identify this issue.
即使在谷歌搜索和 Stackoverflow 的帮助下，我们还是花了 1 个小时才发现这个问题。
回答by Max Feldman
I had a similar problem Chrome repeatedly told me .val() is not a function, instead of using .val() I had to use .value That got the job done for me hope it works for you.
我有一个类似的问题 Chrome 反复告诉我 .val() 不是一个函数，而不是使用 .val() 我不得不使用 .value 这为我完成了工作，希望它对你有用。
