javascript - 动态创建元素后的 jQuery 选择器

Question

我正在尝试使用 jQuery 选择器获取动态创建的元素，但它返回的是一个空数组。

我要做的第一件事是抓取一个空的 div:

var packDiv = document.getElementById('templates');
packDiv.innerHTML = "";

然后循环添加项目:

packDiv.innerHTML = packDiv.innerHTML + "<img id='" + thumbName + "' src='thumbs/" + thumbName + "'/>";

循环结束后，我尝试使用以下方法选择一个项目:

console.log($("#"+thumbName));

返回空数组。我搜索的所有内容都显示使用 .on 但所有示例都显示是设置事件处理程序。

我的问题是如何为动态创建的元素格式化选择器？

Answer 1

假设 thumbName 是一个文件名，例如 foo.jpg，它不会像您期望的那样被 jQuery 解析。 .jpg 名称的一部分被视为类名，并且由于您没有为该元素提供此类名称，jQuery 返回一个空数组 - 它找不到与您的选择器匹配的任何内容。您实际上是在搜索具有 ID foo 和类名称 jpg 的元素。

我的处理方式是这样的:

var packDiv = $('#templates');
packDiv.empty();

//inside a loop
packDiv.append("<img class='" + thumbName.replace(/\./g,'') + "' src='thumbs/" + thumbName + "'/>");

console.log($("."+thumbName.replace(/\./g,'')));