成功克隆并附加后无法使用标识符访问 dom 元素答案

【问题标题】：Unable to access dom element using identifier after successfully cloning and appending it成功克隆并附加后无法使用标识符访问 dom 元素
【发布时间】：2011-03-24 12:37:57
【问题描述】：

我准备一个模板 div 的克隆，为其分配一个动态 ID 并将其附加到 DOM，如下所示：-

var chat_window_clone_obj = $('div#chat_window_template').clone();

cloned_element_id = 'chat_window'+dom_id_separator+session_id;
$(chat_window_clone_obj).attr('id',cloned_element_id);
$(chat_window_clone_obj).appendTo("div#chat_windows_holder");

但是，在那之后我无法使用它的 ID 访问克隆的元素（在 firefox 中检查，我确信这在所有浏览器中都是相同的）：-

$('div#chat_windows_holder').length // comes 0
$('div#chat_windows_holder').removeClass("hidden"); //does not work

但是我可以这样访问：-

$(chat_window_clone_obj).length // works
$(chat_window_clone_obj).removeClass("hidden"); //works

我在这里缺少什么？我可以在 Firefox 的 HTML 选项卡中看到正确附加了所需 ID 的元素。

【问题讨论】：

你为什么要把 chat_window_clone_obj 包装在 $() 中？
你不应该用$() 包裹chat_window_clone_obj，因为它会在你每次这样做时克隆对象。这意味着 $(chat_window_clone_obj).attr('id',cloned_element_id); 应该是 chat_window_clone_obj.attr('id',cloned_element_id);
谢谢@Tom 你能给出一些解释或一些解释的链接

标签： jquery dom cloning

【解决方案1】：

当您尝试按 ID 选择它时，您将获得原始元素 - 就像第一个与该 ID 匹配的元素一样。 You should not have duplicate IDs in your document。试试这个：

var chat_window_clone_obj = $("div#chat_window_template").clone();
chat_window_clone_obj.attr("id", "chat_window_clone");
$("#chat_window_clone").doSomething();

【讨论】：

我认为他正在动态生成 ID，所以这可能不是问题。

【解决方案2】：

我认为问题在于您没有通过正确的 ID 访问。 chat_windows_holder 是新创建对象的ID吗？它看起来不像在您的示例代码中。

chat_window_clone_obj 的值是多少？这就是您应该在选择器中使用的值（这就是第二个示例有效的原因）。

【讨论】：

【解决方案3】：

问题是我在分配给新克隆元素的 dom id 中使用了一些非法字符。

类似的东西 -

dom_id_separator = '%%--%%'; //  Character % is illegal

var chat_window_clone_obj = $('div#chat_window_template').clone();
cloned_element_id = 'chat_window'+dom_id_separator+session_id;

查看What characters are allowed in DOM IDs? 获取合法字符列表。

我正确分配了动态 ID。我后来用$() 去掉了chat_window_clone_obj 的包装。

【讨论】：