Multi ID селектор

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

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

РЕДАКТИРОВАТЬ: простой $('#add-done-modal', data) возвращает пустой объект jQuery. Я снова уверен #add-done-modal в data,

РЕДАКТИРОВАТЬ: эта функция вызывается 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:

<!DOCTYPE html>
<html lang="fr">
  <head>
    <!-- Head stuff -->
  </head>
  <body>
    <div id="all">
      <div class="top-bar">
        <div class="container">
          <div class="row d-flex align-items-center">
            <div class="col-8 col-lg-9">
              <form action="/updatelocale/" method="POST">
                <select class="bs-select" onchange="this.form.submit();">
                  <!-- Locale options, can be disregarded -->
                </select>
              </form>
            </div>
            <div class="col justify-content-md-end">
              <div class="row">
                <!-- Login and some buttons, not used -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <header class="nav-holder make-sticky">
        <div id="navbar" role="navigation" class="navbar navbar-expand-lg">
          <!-- A pretty navbar -->
        </div>
      </header>
      <div id="heading-breadcrumbs">
        <!-- Cute breadcrumbs -->
      </div>
      <div id="content">
        <!-- Product, loading this from data works -->
        <div id="product" class="container">
          <div id="productMain" class="row">
            <!-- Stuff inside #product -->
          </div>
        </div>
      </div>
      <footer class="main-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" class="modal fade">
      <div role="document" class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 id="add-done-modalLabel" class="modal-title">cart.add.done</h4>
            <button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>
          </div>
          <div class="modal-body">cart.add.done.long</div>
          <div class="modal-footer"><button data-dismiss="modal" class="btn">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" class="modal fade">
      <div role="document" class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 id="add-failed-modalLabel" class="modal-title">cart.add.failed</h4>
            <button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>
          </div>
          <div class="modal-body">cart.add.failed.long</div>
          <div class="modal-footer"><button data-dismiss="modal" class="btn">modal.close</button></div>
        </div>
      </div>
    </div>
    <div id="login-modal" tabindex="-1" role="dialog" aria-labelledby="login-modalLabel" aria-hidden="true" class="modal fade">
      <div role="document" class="modal-dialog">
        <!-- I don't care about this modal -->
      </div>
    </div>
  </body>
</html>

РЕДАКТИРОВАТЬ: Вот скрипка с некоторыми тестами. После рендеринга документа в 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, содержащий элементы верхнего уровня в <body>, См. http://api.jquery.com/jQuery/.

Но если строка выглядит как фрагмент 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 например.

Источник
Другие вопросы по тегам