AEM и jQuery :: Код работает в MS edge, но не в Chrome

Question

Это код, который я написал, и он работает очень противоречиво.Это работает на краю Microsoft, но не на Chrome.Он использует платформу начальной загрузки для вызова модального окна.

<div class="modal fade" id="cnbModalPopUpRedirect-disclosure1" tabindex="-1" role="dialog" aria-labelledby="cnbModalPopUpRedirectLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title" id="cnbModalPopUpRedirectLabel">
                        You are about to leave the City National Bank website.
                    </h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;
                      </span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>The website you are about to enter is not operated by City National Bank. City National Bank does not endorse the content of this website and makes no warranty as the accuracy of content or functionality of this website. City National Bank is not responseible for the security, content or availability of any third-party sites, or their partners. The terms of use, privacy and security policies of the site may differ from those of City National Bank.</p>

                </div>
                <div class="modal-footer">
                    <a data-title="modal-cnb-redirect" class="btn btn-primary btn-modal" href="http://hudlinentertainment.com/" role="button" target="_blank">
                        Continue
                    </a>
                    <button type="button" class="btn btn-link btn-modal" data-dismiss="modal">
                            Close
                    </button>
                </div>
            </div>
        </div>
  </div>

<script type="text/javascript" src="/etc.clientlibs/clientlibs/granite/jquery.min.js"></script>
<script type="text/javascript" src="/etc.clientlibs/clientlibs/granite/utils.min.js"></script>
<script type="text/javascript" src="/etc.clientlibs/clientlibs/granite/jquery/granite.min.js"></script>
<script type="text/javascript" src="/etc.clientlibs/news-and-insights/components/content/disclosure/clientlibs.min.js"></script>

Boostrap js также включается в нижний колонтитул страницы следующим образом:

<script type="text/javascript" src="/etc.clientlibs/news-and-insights/clientlibs/vendor/bootstrap.min.js"></script>

JavaScript, к которому я написалобрабатывать событие clickно он не выдает никакой ошибки, и console.log внутри $('a[href*="#disclosure"]').click(function(e) { не печатается ни в консоли отладчика.Я не знаю, есть ли что-то в браузере Chrome, которому не нравится код, или сам код написан не так, как он должен был быть.

EDIT ::

Этоэто HTML:

<p>Participants include: Reginald Hudlin, CEO of&nbsp;
    <a href="#disclosure1">
        Hudlin Entertainment
    </a>; 
    Jennifer Houston, managing partner at Makai; 
    Kim Watson, president and co-founder of Groupie Inc.; 
    Mike Cano, CEO of&nbsp;
    <a href="http://www.latinodigitalsolutions.com/" target="_blank">
        Latino Digital Solutions
    </a>; 
    and Allison Samuels,&nbsp;
    <a href="https://www.harpercollins.com/cr-110001/allison-samuels" target="_blank">
        author and journalist
    </a>.
</p>

Также этот фрагмент HTML выше любого другого кода, который я написал

Answer 1

Убедитесь, что запрашиваемый вами HTML-сегмент существует в DOM до того, как вы действительно запросите его.Если он добавлен динамически и этот элемент не существует при запуске $().ready, он не будет привязан.Установите точку останова в обработчике готовности и выполните поиск в DOM вручную, используя инструменты инспектора для этого точного элемента.Если его не существует, вот в чем проблема.

Рассмотрим этот пример, демонстрирующий 2 привязки, каждая из которых удовлетворит ваш селектор, но только ту, которая существует в DOM до того, как запрос сработает.

$(document).ready(function() {
  $('a[href*="#disclosure"]').click(function(e) {
    console.log("Foo");
  });

  // Alternatively, you can delegate to account for dynamic content
  $(document).on("click", 'a[href*="#disclosure"]', function(e) {
    // This console will print for both anchors
    console.log("Bar");
  });
});

$(function() {
  // This one doesn't exist until after and thus, won't work
  $("#foo").append($("<a></a>", {
    href: "#disclosure2",
    text: "Disclosure 2"
  }));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="foo">
  <!-- This anchor exists before the query happens -->
  <a href="#disclosure1">Disclosure 1</a>
</div>