Question

期望的结果：

点击＃city-card，data-id = $ {cityName}和href =＆＃34; new.html＆＃34;。
将data-id值存储在变量中。
从Firestore中的集合中获取cityName文档，以便在new.html页面上使用一次

发生了什么：

一个。当preventDefault（）存在时，Firestore文档将记录到控制台，但它会阻止页面转到新的href。

B中。当preventDefault（）不存在且页面加载到新的href时，Firestore文档将不会记录到控制台。

我希望Firestore文档在页面加载到新的href时登录到控制台。

GIF示例：

一个。 Working Correctly (with preventDefault();)

B中。 Works Incorrectly (withOUT preventDefault();)

问题：如何在.on点击功能中让docRef.get().then(function(doc){ });在没有preventDefault的情况下运行，以便我可以在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) {

Firestore .get（）函数没有在JQuery .on click函数中运行

1 个答案: