Почему я не могу получить доступ к этому динамически загруженному элементу DOM по ID (без IFRAME)?

Я работаю с внешним сайтом, который позволяет встроенный контент javascript (Qualtrics). Qualtrics динамически загружает некоторые контроллеры. Когда я тестирую доступ к этим контроллерам через веб-панель Chrome, после их полной загрузки я могу видеть загруженные контроллеры в окне Elements, которое представляет текущий DOM. Однако я не могу получить доступ к этим элементам по id, либо с помощью jQuery, либо через document.getElementById.Почему я не могу получить доступ к этому динамически загруженному элементу DOM по ID (без IFRAME)?

Один из контроллеров имеет идентификатор QID12~14~handle. В браузере элементы DOM, я вижу тег:

<div id="QID12~14~handle" class="handle selected" style="left: 122px;"></div>

При просмотре источника на страницы, я вижу, они динамически загружаются и вставляется в страницу с помощью тега сценария:

<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. Если я вижу id в текущей DOM, почему я не могу получить к нему доступ по его идентификатору, поскольку он в настоящее время существует в DOM?

Если я позвоню jQuery(".handle"), я вижу этот элемент:

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

Что может помешать мне получить доступ к этим элементам по идентификатору?

источник

2013-12-06 supershnee

QID12~14~handle не является действительным селектор (хотя это является допустимым атрибутом id) из-за ~, которые Sibling селекторов. Вы можете обойти эту проблему, используя идентификатор себя атрибут:

[id='QID12~14~handle']

Или вы можете избежать селекторы с обратной косой черты (это будет также работать для querySelector):

QID12\\~14\\~handle

Вам также может понадобиться #, чтобы указать ID в зависимости от API, с которым вы работаете.

источник

2013-12-06 03:06:43

Извините, я понял, что у меня была гораздо более простая проблема. Символ тильды (~) должен быть экранирован в jQuery. Этот запрос возвращает правильный элемент:

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

источник

2013-12-06 03:06:42 supershnee

Тильда в идентификаторе, похоже, проблема.

Вам нужно избегать специального символа с двойной спиной косой чертой.

$("#QID15\\~1")

Я просто попытался следующее в консоли это, казалось, работать

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

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

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

источник

2013-12-06 03:18:24 Lenny

Почему я не могу получить доступ к этому динамически загруженному элементу DOM по ID (без IFRAME)?

ответ

Смежные вопросы