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

时间:2012-10-31 16:56:15

标签: javascript jquery

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

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

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

然后在循环中添加项目:

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

循环结束后,我尝试使用:

选择一个项目
console.log($("#"+thumbName));

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

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

1 个答案:

答案 0 :(得分:2)

假设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,'')));