Question

这是我的代码，它们起作用起作用：

firebase.initializeApp({});

var auth = firebase.auth();
const firestore = firebase.firestore();
const settings = {timestampsInSnapshots: true};
firestore.settings(settings);
var db = firebase.firestore();


$(function() {
    firebase.auth().onAuthStateChanged(function(user) {
        if (user) {
            // User is signed in.
            var uid = user.uid;

            // code in question
            db.collection('users').doc(uid).collection('people').doc().set({
                firstname: "John",
                lastname: "Doe"
            })
            .catch(function(error) {
                console.error("Error writing document: ", error);
            });    
        } else {
            // User is signed out.
        }
    });
});

但是，我想在页面上的表单提交后触发db.collection位；像这样的东西：

firebase.initializeApp({});

var auth = firebase.auth();
const firestore = firebase.firestore();
const settings = {timestampsInSnapshots: true};
firestore.settings(settings);
var db = firebase.firestore();

$(function() {
    firebase.auth().onAuthStateChanged(function(user) {
        if (user) {
            // User is signed in.
            var uid = user.uid;

            $('#myform').on('submit', function() {
                db.collection('users').doc(uid).collection('people').doc().set({
                    firstname: "John",
                    lastname: "Doe"
                })
                .catch(function(error) {
                    console.error("Error writing document: ", error);
                });    
            });
        } else {
            // User is signed out.
        }
    });
});

但是无论出于什么原因都不起作用。

编辑：这是整个#myform。它存在于引导程序模式中

        <form id="myform">
          <div class="form-row">
            <div class="col-md-12">
              <label for="firstname">First Name</label>
              <div class="input-group">
                <span class="input-group-addon"><i class="icofont icofont-user"></i></span>
                <input type="text" class="form-control" id="firstname" required>
              </div>
            </div>
          </div>
          <div class="form-row">
            <div class="col-md-12">
              <label for="lastname">Last Name</label>
              <div class="input-group">
                <span class="input-group-addon"><i class="icofont icofont-user"></i></span>
                <input type="text" class="form-control" id="lastname" required>
              </div>
            </div>
          </div>
          <div class="form-row">
            <div class="col-md-12">
              <label for="email">Email</label>
              <div class="input-group">
                <span class="input-group-addon"><i class="icofont icofont-email"></i></span>
                <input type="email" class="form-control" id="email" required>
              </div>
              <div id="email-error"></div>
            </div>
          </div>
          <div class="form-row">
            <div class="col-md-12 mb-3">
              <label for="phone">Phone</label>
              <div class="input-group">
                <span class="input-group-addon"><i class="icofont icofont-phone"></i></span>
                <input type="tel" class="form-control" id="phone">
              </div>
              <div id="phone-error"></div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-primary" id="btn-add-person">Add Person</button>
            <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
          </div>
        </form>

Answer 1

您提交的表单可能正在重新加载页面。尝试将onsubmit="return false;"插入您的<form>的属性中。

如果代码在函数内部，为什么不运行？

1 个答案: