Why can't I access this dynamically loaded DOM

Question

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.

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>

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?

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>​
]

What could prevent me from accessing these elements by id?

Answer 1

Sorry, I realized I had a much simpler problem. The tilde (~) character must be escaped in jQuery. This query returns the correct element:

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

Answer 2

The tilde in the id seems to be the issue.

You need to escape the special character with a double back slash like this.

$("#QID15\\~1")

I just tried the following in the console it it seemed to work

//add element for testing
$('body').append('<div id="QID15~1"></div>');

$("#QID15~1")
//returned a blank array

$("#QID15\\~1")
//returned the div as expected

Answer 3

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']

Or you can escape the selectors with backslashes (this will also work for querySelector):

QID12\\~14\\~handle

You may also need # to indicate the ID selector depending upon the API you are working with.