动态创建元素后的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返回一个空数组 - 它找不到与您的选择器匹配的任何内容。您实际上是在搜索标识为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,'')));