为什么无法通过ID(无iframe)访问此动态加载的DOM元素? [英] Why can't I access this dynamically loaded DOM element by ID (no iframes)?
问题描述
我正在使用允许嵌入JavaScript内容(Qualtrics)的外部网站。 Qualtrics动态加载一些控制器。当我通过Chrome网络面板测试访问这些控制器时,在完全加载后,我可以在Elements窗口中看到加载的控制器,代表当前的DOM。但是,我不能通过id,通过jQuery或通过document.getElementById访问这些元素。
I am working with an external site that allows embedded javascript content (Qualtrics). Qualtrics dynamically loads some controllers. When I test accessing these controllers via the Chrome web panel, after they have fully loaded, I can see the loaded controllers in the Elements window which represents the current DOM. However, I cannot access these elements by id, either with jQuery or via document.getElementById.
其中一个控制器的id QID12〜14 〜handle
。在元素DOM浏览器中,我看到标签:
One of the controllers has the id QID12~14~handle
. In the Elements DOM browser, I see the tag:
<div id="QID12~14~handle" class="handle selected" style="left: 122px;"></div>
当我查看页面的源代码时,我发现它们是动态加载并通过脚本插入页面标签:
When I view the page's source, I see they are dynamically loading and inserted into the page via a script tag:
<div class='QuestionBody BorderColor'>
<div class='horizontalbar ChoiceStructure RtlOverride'></div>
<div id='debug'></div>
<!-- This has to be called after the html it references. Thats why its down here -->
<script type='text/javascript'>
QModules.loadExternalModule('../WRQualtricsShared/JavaScript/CSBar/slider.51487.js', function () {
(function () {
CS_QID15 = new CSBar('0', '100', '10', 'QID15', '');
if (CS_QID15.loaded) {
CS_QID15.setDecimals(0);
if (CS_QID15.snapToGrid) {
CS_QID15.makeSlider('QID15~1');
CS_QID15.makeSlider('QID15~2');
CS_QID15.setStartPositions({"1": 0, "2": 0, "3": 0.64599483204134});
}
else {
CS_QID15.makeSlider('QID15~1');
CS_QID15.makeSlider('QID15~2');
CS_QID15.setStartPositions({"1": 0, "2": 0, "3": 0.64599483204134});
}
}
}).delay(); //if ie is waiting for something and this loads too fast it breaks. the defer fixes a very esoteric bug.
});
</script>
<div class='clear zero'></div>
</div>
页面未使用iFrames。如果我在当前DOM中看到一个ID,为什么我不能通过它的id来访问它,因为它目前存在于DOM?
The page is not using iFrames. If I see an id in the current DOM, why can't I access it by it's id as it currently exists in the DOM?
如果我调用 jQuery(。handle)
,我看到这个元素:
If I call jQuery(".handle")
, I see this element:
[
<div id="QID12~14~handle" class="handle selected" style="left: 122px;"></div>,
<div id="QID15~1~handle" class="handle selected" style="left: 0px;"></div>,
<div id="QID15~2~handle" class="handle selected" style="left: 0px;"></div>
]
什么可能阻止我通过id访问这些元素?
What could prevent me from accessing these elements by id?
推荐答案
QID12〜14〜handle
不是有效的选择器(虽然它是一个有效的 id
属性) code>〜,它们是兄弟选择器。您可以使用id属性本身来解决这个问题:
QID12~14~handle
is not a valid selector (although it is a valid id
attribute) because of the ~
, which are sibling selectors. You can get around this using the id attribute itself:
[id='QID12~14~handle']
或者,您可以使用反斜杠转义选择器(这也适用于 querySelector
):
Or you can escape the selectors with backslashes (this will also work for querySelector
):
QID12\\~14\\~handle
您还可能需要#
来根据您的API指示ID选择器使用。
You may also need #
to indicate the ID selector depending upon the API you are working with.
这篇关于为什么无法通过ID(无iframe)访问此动态加载的DOM元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!