如何使用 jQuery 访问存储在数组中的元素？答案

【问题标题】：How can I use jQuery to access an element that's stored in an array?如何使用 jQuery 访问存储在数组中的元素？
【发布时间】：2015-11-14 04:12:24
【问题描述】：

我正在构建一个 HTML 表单，对于其中的一部分，需要将 div 内的一组 HTML 输入字段推送到一个数组中。 div 和所有字段在创建时都会获得唯一的 ID/名称 - 特别是，其中一个输入是选择。

所有这些都可以正常工作 - 字段已创建并推送到数组，所有内容都正确，等等，但我似乎无法访问应该稍后出现的 jQuery 更改功能的选择元素，在创建字段之后。我测试了一个内联 Javascript “onchange = myFunction()” 类型的东西，它能够访问 select 元素 - 我明白为什么会这样，但这不是一个可接受的解决方案......我真的需要使用 $ ("#id").change 函数。

如何使用 jQuery 访问存储在数组中的选择元素？

 this['input_array' + siteName] = [];

 for (y = 0; y < numberFound; y++){
 this['input_array' + siteName].push('<div id="'+routeValue+''+siteName+'Details'+y+'" class="details">Species: <select id="'+siteName+'Species'+y+'" name="species['+y+']" data-speciesNumber="'+y+'">'+speciesList+'</select></div>);

     $("#"+siteName+"Species"+y+"").change(function(){
       species = this.value;
       speciesNumber = this.getAttribute("data-speciesNumber");
       siteSpeciesNumber = displayName + "" + species + "" + speciesNumber;
       document.getElementById(""+siteName+"compileField"+speciesNumber+"").value = siteSpeciesNumber;
       });

      };

      $("#"+routeValue+""+siteName+"Details").append(this['input_array' + siteName]);

【问题讨论】：

我会尽量简单地解析这个，因为我的代码有点乱，不想让任何人陷入困境，试图通过它... 阅读：stackoverflow.com/help/mcve 如果您不显示最少的代码和意图，就不可能找出问题所在。
而不是$("#id").change；去$(document).on("change", "#id", function(){ ... your code...});
不确定你在问什么。您是从数组中创建选择，然后尝试访问它吗？
vijayP，就是这样，谢谢。澄清一下：包含输入元素组的 div 在 for 循环中被推送到数组中；然后将数组的内容附加到表单中。这些推送的 div 中的一个元素是一个选择，我需要一个附加到该选择元素的更改事件。即使每个 select 元素都有一个唯一的 id，通用的 $("#id").change 处理程序也无法访问该元素。用 vijayP 的语法替换它是有效的。 vijay - 你能解释一下这个答案吗？
哦，我的错，我原来的措辞不清楚 - 我忘了提到在推送的 div 中有一个选择......对不起大家。另外，不久将添加一些代码，希望其他人可以受益。

标签： javascript jquery html arrays forms

【解决方案1】：

问题不在于选择在数组中，而在于它尚未附加到 DOM。

尝试将事件处理程序作为元素的一部分附加。现在当 jQuery 将元素插入到文档中时，事件绑定就被注册了。

function $newSelect(y) {
    return $('<select />', {
        html: speciesList,
        id: siteName + 'Species' + y,
        name: 'species[' + y + ']',
        data: {
            speciesNumber: y
        },
        on: {
            change: function(){
                species = this.value;
                speciesNumber = this.getAttribute("data-speciesNumber");
                siteSpeciesNumber = displayName + "" + species + "" + speciesNumber;
                document.getElementById(""+siteName+"compileField"+speciesNumber+"").value = siteSpeciesNumber;
            }
        }
    }
}
function $newField (idNum) {
    return $("<div id="'+routeValue+''+siteName+'Details'+y+'" class="details"></div>", {
        html: $newSelect(idNum)
    });
}
this['input_array' + siteName] = [];

for (y = 0; y < numberFound; y++){
    this['input_array' + siteName].push($newField(y));
};

  $("#"+routeValue+""+siteName+"Details").append(this['input_array' + siteName]);

【讨论】：

或者，您可以将事件处理程序附加到文档而不是元素。
太棒了，谢谢。 vijayP 上面的评论确实有效，但对于我的情况，这是更好的答案，而且总体上更全面。我也很欣赏这个解释。