Функция Firestore .get () НЕ работает в функции JQuery .on click

Question

Желаемый результат:

1. Нажмите на загрузочную карту с # city-card, data-id = $ {cityName} и href = "new.html".
2. Сохранить значение data-id в переменной.
3. Получить документ cityName из коллекции в Firestore для однократного использования на странице new.html

Что происходит:

A. Документ Firestore будет записываться на консоль, когда присутствует функция protectDefault (), но она не позволяет странице перейти к новой ссылке.

B. Документ Firestore не будет записываться в консоль, если метод protectDefault () НЕ присутствует и страницы загружаются в новую ссылку.

Я хочу, чтобы документ Firestore регистрировался на консоли, когда страница загружается в новый раздел href.

GIF Примеры:

A. Работает правильно (с protectDefault ();)

B. работает некорректно (без ПРЕДУПРЕЖДЕНИЯ ();)

Вопрос: Как заставить docRef.get().then(function(doc){ }); запускаться без protectDefault в функции .on click, чтобы я мог использовать эту информацию на странице new.html?

Пример кода:

HTML CARD

<a id="city-card" data-id="${cityName}" href="location-page.html">
 <div class="card bg-dark text-white">
    <h4 class="card-title">San Francisco</h4>
  </div>
</a>

Jquery

var cityName = "san-francisco";

$(document).ready(function(){
  $('body').on('click','#city-card',function(e){
      // e.preventDefault();
      //Stores data-id=${cityName} in variable cityPage
      const cityPage = $(this).data('id');
      console.log(cityPage);

      const docRef = db.collection("city").doc(cityPage)
      docRef.get().then(function(doc) {
        var cityData = doc.data();
        var cityName = doc.id;
        console.log("cityName: " + cityName);
        console.log(cityData);
      });
  });
});

Спасибо за любую помощь, которую вы можете оказать!

Answer 1

Пойми это сегодня утром с помощью друга.

Исправлено: заполнение глобальной переменной по щелчку, сохранение этой глобальной переменной в параметрах запроса, а затем доступ к глобальной переменной после перезагрузки новой страницы.

Вот код!

$(document).ready(function(){
  $('body').on('click','#city-card',function(e){
    //Stores data-id=${cityName} in variable cityPage
    window.cityPage = $(this).data('id');
    var newCityPage = window.cityPage;
    //Returns redirectPage function
    return redirectPage(newCityPage)
  });
});
//Opens new window with newCityPage in the query perams
function redirectPage(newCityPage) {
    window.location = "file:///Users/macbookpro/Desktop/Surf-Trip/location- 
   page.html?newCityPage="+newCityPage;
    window.cityPage = newCityPage;
    return false;
}
//Gets query perams by name
function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}
//Storing the query perams in a constant
const newCityPage = getParameterByName('newCityPage');
//Pings Firestore for relevant newCityPage document
const docRef = db.collection("city").doc(newCityPage);
docRef.get().then(function(doc) {