Многодисковый селектор

$('body').append($('#add-done-modal, #add-failed-modal', data));

Этот код должен добавить div с id add-done-modal и add-failed-modal к body. Эти div подаются в data среди других вещей. Я уверен, что html в data отлично подходит и предназначен. Код никогда не находит id. Я использую jQuery 3.3.1. Я знаю, что классы - это решение, но будет довольно громоздким из-за различных модальных, которые могут быть или не выбраны в зависимости от вызова клиента.

EDIT: простой $('#add-done-modal', data) возвращает пустой объект jQuery. Я еще раз уверен, что #add-done-modal находится в data.

EDIT: эта функция вызывается событием click:

function popup(url, name) {
 $.get(url, (data) => {
 $('#loading-modal .modal-body').html($('#product', data));
 // Can't find '#add-done-modal' nor '#add-failed-modal'
 let x = $('#add-done-modal', data);
 x = $('#add-failed-modal', data);
 $('body').append($('#add-done-modal, #add-failed-modal', data));
 // Initialize jQuery-UI or Bootstrap stuff loaded above here. Working.
 });

 $('#loading-modal .modal-header .modal-title').html(name);
 $('#loading-modal').modal('show');
}

Вот содержимое, возвращаемое вызовом AJAX:

<!-- Head stuff -->
 
 
 <div id="all">
 <div>
 <div>
 <div>
 <div>
 <form action="/updatelocale/" method="POST">
 <select onchange="this.form.submit();">
 <!-- Locale options, can be disregarded -->
 </select>
 </form>
 </div>
 <div>
 <div>
 <!-- Login and some buttons, not used -->
 </div>
 </div>
 </div>
 </div>
 </div>
 <header>
 <div id="navbar" role="navigation">
 <!-- A pretty navbar -->
 </div>
 </header>
 <div id="heading-breadcrumbs">
 <!-- Cute breadcrumbs -->
 </div>
 <div id="content">
 <!-- Product, loading this from data works -->
 <div id="product">
 <div id="productMain">
 <!-- Stuff inside #product -->
 </div>
 </div>
 </div>
 <footer>
 <!-- Pretty footer -->
 </footer>
 </div>
 <!-- Modal #add-done-modal -->
 <div id="add-done-modal" tabindex="-1" role="dialog" aria-labelledby="add-done-modalLabel" aria-hidden="true">
 <div role="document">
 <div>
 <div>
 <h4 id="add-done-modalLabel">cart.add.done</h4>
 <button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
 </div>
 <div>cart.add.done.long</div>
 <div><button data-dismiss="modal">modal.close</button></div>
 </div>
 </div>
 </div>
 <!-- Modal #add-failed-modal -->
 <div id="add-failed-modal" tabindex="-1" role="dialog" aria-labelledby="add-failed-modalLabel" aria-hidden="true">
 <div role="document">
 <div>
 <div>
 <h4 id="add-failed-modalLabel">cart.add.failed</h4>
 <button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
 </div>
 <div>cart.add.failed.long</div>
 <div><button data-dismiss="modal">modal.close</button></div>
 </div>
 </div>
 </div>
 <div id="login-modal" tabindex="-1" role="dialog" aria-labelledby="login-modalLabel" aria-hidden="true">
 <div role="document">
 <!-- I don't care about this modal -->
 </div>
 </div>

EDIT: Вот скрипка с некоторыми испытаниями. После рендеринга документа в DOM, $('#add-done-modal, #add-failed-modal') и $('#add-done-modal') найдут модалы, прежде чем он этого не сделает. В этой второй скрипте со статическим HTML я проверил, были ли найдены модалы, они были.

Существует ли ограничение длины jQuery для строк HTML?

1 ответ

Если вы хотите правильно работать с строкой HTML, я бы предложил разбор ее в документе, например

const domParser = new DOMParser()
const doc = domParser.parseFromString(data, 'text/html')

затем используйте doc в селекторах jQuery, например

$('#add-done-modal', doc)

Когда jQuery встречает контекст, он просто преобразует выражение в...

jQuery(context).find(selector)

См. Https://github.com/jquery/jquery/blob/3.3.1/src/core/init.js#L99

Проблема здесь в том, что jQuery анализирует целые документы в объект jQuery, содержащий элементы верхнего уровня в . См. Http://api.jquery.com/jQuery/#jQuery2

Но если строка представляет собой фрагмент HTML, jQuery пытается создать новые элементы DOM, как описано в HTML

Например, взяв ваш HTML как строку...

$(html)

дает мне объект jQuery с 15 элементами, в основном пустой текст и некоторые узлы комментариев, но в том числе

#3 <div id="all">...</div>
#7 <div id="add-done-modal" ...="">...</div>
#11 <div id="add-failed-modal" ...="">...</div>
#13 <div id="login-modal" ...="">...</div>

Используя этот объект в качестве контекста селектора, вы можете найти элементы, которые являются дочерними элементами этих 5, но не сами эти элементы. Вот почему вы можете найти #product например.

licensed under cc by-sa 3.0 with attribution.