Jquery - 从动态创建的输入中获取价值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16245947/
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 - Get value from dynamically created inputs
提问by Kim
I'm stuck in trying to create a "quiz-generator".
我一直在尝试创建一个“测验生成器”。
I have a form were you can fill out answer alternatives for the quiz, but here you could also dynamically create new fields with new id's.
我有一个表格，您可以填写测验的替代答案，但在这里您也可以动态创建具有新 ID 的新字段。
So its creating new inputs with id txtAnswer1,txtAnswer2 etc.
因此，它使用 id txtAnswer1、txtAnswer2 等创建新输入。
Here is the (not working) code to get the values:
这是获取值的（不工作）代码：
$("#AddNewQuiz").click(function () {
var NewQuizAlts = $("#txtAnswer").val();
var NewQuizQuestion = $("#NewQuizQuestion").val();
var init = {
'questions': [
{
'question': NewQuizQuestion,
'answersAlts': [NewQuizAlts,'Two','Three','Four'],
'correctAnswer': 1
}
]
}
You see here it is only getting the static first value. But I would like to get all of the values created in a "loop" or something.
你在这里看到它只得到静态的第一个值。但我想获得在“循环”或其他东西中创建的所有值。
Anyone has got any ideas?
任何人都有任何想法？
Thanks!
谢谢！
Thanks for the answers!
感谢您的回答！
But I can't manage it to work!
但我无法让它工作！
I've tried this:
我试过这个：
$('input[id^="txtAnswer"]').each(function(input){
var value = $('input[id^="txtAnswer"]').val();
var id = $('input[id^="txtAnswer"]').attr('id');
alert('id: ' + id + ' value:' + value);
});
But is only giving me alerts (4 times) of the only the lastcreated input. What can be wrong?
但只给我最后创建的输入的警报（4 次）。有什么问题？
Thing is, this is what I would like to achive:
事情是，这就是我想要达到的目标：
1.) Use the above code to get a list of allcreated inputs.
1.) 使用上面的代码获取所有创建的输入的列表。
2.) Put them in a comma seperated list with the values like this:
2.) 将它们放在一个逗号分隔的列表中，其值如下：
QuestionAlts = [''+Alt1+'',''+Alt2+'',''+Alt3+''];
3.) And also have it generating more alternatives in the list depending on how many inputs that were created, so if I created 5 alternatives it will be:
3.) 并让它在列表中生成更多选项，具体取决于创建的输入数量，所以如果我创建了 5 个选项，它将是：
QuestionAlts = [''+Alt1+'',''+Alt2+'',''+Alt3+'',''+Alt4+'',''+Alt5+''];
I understand if it is a lot to ask for help with all this but a little bit is better than nothing :)
我知道在这一切方面寻求帮助是否很多，但有一点总比没有好:)
Thanks!
谢谢！
回答by Yatrix
EDIT:
编辑：
In this code, you're not properly using context. http://api.jquery.com/jQuery.each/
在这段代码中，您没有正确使用上下文。http://api.jquery.com/jQuery.each/
$('input[id^="txtAnswer"]').each(function(input){
var value = $('input[id^="txtAnswer"]').val();
var id = $('input[id^="txtAnswer"]').attr('id');
alert('id: ' + id + ' value:' + value);
});
In your .each, what's passed to the function is an item in the array you pulled with your selector. When you set value = $('input..., you're pulling the same array all over again.
在您的 中.each，传递给函数的是您使用选择器拉出的数组中的一个项目。当您设置时value = $('input...，您将再次拉动同一个数组。
Use .each, this way:
使用.each，这样：
$('your selector').each(function(index, item){
var val = $(item).val();
var id = $(item).attr('id');
...
});
Unless you need the answers to have ids, why not use data-* attributes to denote them as an answer? You can tag each one like this:
除非您需要答案来获得 id，否则为什么不使用 data-* 属性将它们表示为答案呢？你可以像这样标记每一个：
<input data-type="answer"/>
<input data-type="answer"/>
Then just pull them all in this manner:
然后以这种方式将它们全部拉出：
$('input[data-type="answer"]')
Doing it this way removes concern about needing to make sure every dynamic id is unique, if they aren't important. I have a data filter I created for work that dynamically creates elements after the page is loaded and I have no problem pulling data from the DOM in this manner.
这样做可以消除需要确保每个动态 ID 都是唯一的（如果它们不重要）的担忧。我有一个为工作创建的数据过滤器，它在页面加载后动态创建元素，并且以这种方式从 DOM 中提取数据没有问题。
回答by ysrb
You can do this:
你可以这样做：
$('input').each(function(input){
var value = $(input).value();
var id = $(input).attr('id');
console.log('id: ' + id + ' value:' + value);
});
Try this:
尝试这个：
$('input[id^="txtAnswer"]').each(function(input){
var value = $(this).val();
var id = $(this).attr('id');
alert('id: ' + id + ' value:' + value);
});
回答by Buchannon
If all you want to do is loop through inputs, try something like this:
如果您只想遍历输入，请尝试以下操作：
$('input').each(function() { alert(this.val()); });
That will loop through EVERY input field on your page.
这将遍历页面上的每个输入字段。
You can filter it further by defining [type=text] or even using regular expressions to get certain text fields starting with certain Ids (e.g. "match any text field with an ID starting with "txtAnswer" followed by a number).
您可以通过定义 [type=text] 或什至使用正则表达式来进一步过滤它以获取以某些 ID 开头的某些文本字段（例如“匹配任何文本字段，其 ID 以“txtAnswer”开头，后跟一个数字）。
Try this:
尝试这个：
$('input[id^="txtAnswer"]').each(function(input){
var value = $(this).val();
var id = $(this).attr('id');
alert('id: ' + id + ' value:' + value);
});
