为什么我不能通过ID(无iframes)访问这个动态加载的DOM元素?

我正在使用允许嵌入式JavaScript内容(Qualtrics)的外部网站。 Qualtrics动态加载一些控制器。 当我通过Chrome网络面板测试访问这些控制器时,在完全加载后,我可以在Elements窗口中看到加载的控制器,它代表当前的DOM。 但是,我无法通过id访问这些元素,无论是使用jQuery还是通过document.getElementById。

其中一个控制器具有id QID12~14~handle 。 在Elements DOM浏览器中,我看到了标记:

 

当我查看页面的源代码时,我看到它们是动态加载的,并通过脚本标记插入到页面中:

 
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. });

该页面未使用iFrame。 如果我在当前DOM中看到一个id,为什么我不能通过它的id来访问它,因为它当前存在于DOM中?

如果我调用jQuery(".handle") ,我会看到这个元素:

 [ 
​,
​,
​ ]

有什么可以阻止我通过id访问这些元素?

QID12~14~handle不是有效的选择器(尽管它是一个有效的id属性),因为~是兄弟选择器。 你可以使用id属性本身解决这个问题:

 [id='QID12~14~handle'] 

或者你可以使用反斜杠转义选择器(这也适用于querySelector ):

 QID12\\~14\\~handle 

您可能还需要#来指示ID选择器,具体取决于您使用的API。

对不起,我意识到我有一个更简单的问题。 必须在jQuery中转义波浪号(〜)字符。 此查询返回正确的元素:

 jQuery("#QID12\\~14\\~handle") 

id中的波浪号似乎是个问题。

你需要使用像这样的双反斜杠来逃避特殊角色。

 $("#QID15\\~1") 

我只是在控制台中尝试了以下它似乎工作

 //add element for testing $('body').append('
'); $("#QID15~1") //returned a blank array $("#QID15\\~1") //returned the div as expected