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

Question

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

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

如何使用 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]);

Answer 1

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

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

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]);