使用 jquery 获取动态创建的文本框的值

getting the value of dynamically created textbox using jquery

提问by Aoi

I'm having a hard time with getting the value of my dynamically appended textboxes. I'm using the $.eachfunction to iterate all of the textboxes according to its idand index within the id.

我很难获得动态附加的文本框的值。我正在使用该$.each函数根据其id和id.

<input type="text"  id="student_grde_G[1]" >
<input type="text"  id="student_grde_G[2]" >
<input type="text"  id="student_grde_G[3]" >

<input type="button" id="save_grade_button" class="button" value="Save Grades">

jQuery:

jQuery：

$('#save_grade_button').click(function (){
    $.each($('#student_grde_G[]'), function(i, item) {
        var grade =  $('#student_grde_G['+i+']').val();
        alert(grade);
    });
});

This doesn't work. Can anyone tell me how I can fix this?

这不起作用。谁能告诉我如何解决这个问题？

回答by DarkMukke

In general its better to use a class for it, because ids are a unique identifier, you should not work with arrays in them. if you want to handle them server side after a post you better do it this way :

一般来说，最好为它使用一个类，因为 id 是一个唯一的标识符，你不应该在其中使用数组。如果您想在发布后处理它们的服务器端，您最好这样做：

<input type="text" class="studentGrade"  id="student_grde_G_1" name="studentGrade[]" >
<input type="text" class="studentGrade"  id="student_grde_G_2" name="studentGrade[]" >
<input type="text" class="studentGrade"  id="student_grde_G_3" name="studentGrade[]" >

<input type="button" id="save_grade_button" class="button" value="Save Grades">

and for your script

和你的脚本

$('#save_grade_button').click(function (){

         $('.studentGrade').each(function() {
           var grade =  $(this).val();
           alert(grade);
         });


     });

Edit: since jQuery 1.7, you should bind your event with .on()

编辑：从 jQuery 1.7 开始，你应该用.on()绑定你的事件

$('#save_grade_button').on('click', function (){
   $('.studentGrade').each(function() {
      var grade =  $(this).val();
      alert(grade);
   });
};

OR if the save button will be dynamically too

或者，如果保存按钮也是动态的

$(document).on('click', '#save_grade_button', 'gradeSaveClick' function (){
   $('.studentGrade').each(function() {
      var grade =  $(this).val();
      alert(grade);
   });
};

回答by Thijs Kramer

You can just use the item parameter:

您可以只使用 item 参数：

$('#save_grade_button').click(function (){
     $('input[type=text]').each(function(i, item) {
         var grade =  $(item).val();
         alert(grade);
     });
 });

OR with @Adil's answer combined:

或与@Adil 的回答相结合：

$('#save_grade_button').click(function (){
     $('[id^=student_grde_G]').each(function(i, item) {
         var grade =  $(item).val();
         alert(grade);
     });
 });

回答by Yashpal Singla

Added a new class to all text boxes 'student_grde'

为所有文本框“student_grde”添加了一个新类

<input type="text"  class="student_grde" id="student_grde_G[1]" >
      <input type="text" class="student_grde" id="student_grde_G[2]" >
      <input type="text" class="student_grde" id="student_grde_G[3]" >


      <input type="button" id="save_grade_button" class="button" value="Save Grades">

And jquery to

和 jquery

$('#save_grade_button').click(function (){
    $.each($('.student_grde'), function(i, item) {
        var grade =  $('#student_grde_G['+i+']').val();
        alert(grade);
    });
});

回答by Rune FS

The selection you are using for the each does not match what you think. [] is meant for matching attributes of elements.

您为 each 使用的选择与您的想法不符。[] 用于匹配元素的属性。

E.g. '$("img[alt]")' selects all img tags with an alt attribute and $("img[alt=foo]")' selects all img tags where the value of the alt attribute is foo.

例如，'$("img[alt]")' 选择所有带有 alt 属性的 img 标签，而 $("img[alt=foo]")' 选择所有 alt 属性值为 foo 的 img 标签。

I'd suggest to use a class instead change the input elements to

我建议使用类而不是将输入元素更改为

<input type="text" class="grades" id="student_grde_G[2]" >

and then change the jQuery to

然后将 jQuery 更改为

$('#save_grade_button').click(function (){
    $.each($('grades'), function() {
        var grade =  $(this).val();
        alert(grade);
    });
});

the use of iyou have ignores the last element. The index (i) is zero based so the first value of i is 0 (which in your example will select nothing) and the last is the count of elements minus one resulting in the last element never being selected.

使用iyou have 忽略最后一个元素。索引 (i) 从零开始，因此 i 的第一个值是 0（在您的示例中将不选择任何内容），最后一个值是元素计数减一，导致最后一个元素永远不会被选中。

However since the current element is accessible as thisin the function provided to each, you don't need to worry about any "off by one" errors, if you make the above change to the function

但是，由于当前元素this在提供给每个元素的函数中是可访问的，因此如果对函数进行上述更改，则无需担心任何“逐一”错误

回答by Adil

You do not have element with id student_grde_G[]Use wild card startswith.

您没有带有 id 的元素student_grde_G[]使用通配符starts。

Live Demo

现场演示

$('#save_grade_button').click(function () {
  $.each($('[id^=student_grde_G]'), function (i, item) {
    var grade = $(this).val();
    alert(grade);
  });
});

回答by Kevin Bowersox

If you want to stick with prefixed ids for the inputs you can use the jquery wildcard selector. ALso instead of using a jquery selector to retrieve the value of the grade you can simply use the item passed into the function. As mentioned adding a class to the input may be a more efficient way to proceed.

如果您想为输入坚持使用带前缀的 id，您可以使用 jquery 通配符选择器。此外，您可以简单地使用传递给函数的项目，而不是使用 jquery 选择器来检索等级的值。如前所述，向输入添加一个类可能是一种更有效的处理方式。

$('#save_grade_button').click(function (){

   $.each($("input[id^='student_grde_G']"), function(i, item) { //uses wildcard selector

      var grade =  $(item).val();  //Use item instead of selector
          alert(grade);
      });
 });

Example: http://jsbin.com/axenuj/1/edit

示例：http: //jsbin.com/axenuj/1/edit