Почему jQuery поддерживаемая кнопка регистрации не отвечает?

Question

Я нахожусь в процессе создания веб-сайта с Flask фреймворком. Конечно, он содержит пользователей, а также сайт регистрации и сайт входа. Но после добавления двух дополнительных полей на сайт регистрации и улучшения других частей кода он больше не работает.

Естественно, я ожидал увидеть сообщение об ошибке в своей консоли, где размещается сайт локально, но это к сожалению, это не так.

Теперь я попытался удалить два дополнительных поля, но, похоже, это не проблема.

В чем проблема с моим кодом , и как мне исправить это, чтобы функция регистра снова заработала?

Сайт регистрации: Здесь, в разделе реестра, ничего не происходит при нажатии кнопки.

Сайт входа в систему: Однако здесь, в разделе входа в систему, он реагирует и отображает обратную связь при нажатии кнопки. Работает отлично.

Это jQuery, который должен обеспечивать работу как функции входа в систему, так и функции регистрации на сайте:

function message(status, shake=false, id="") {
  if (shake) {
    $("#"+id).effect("shake", {direction: "right", times: 2, distance: 8}, 250);
  } 
  document.getElementById("feedback").innerHTML = status;
  $("#feedback").show().delay(2000).fadeOut();
}

 $(document).on("click", "#register-button", function() {
   console.log("REGISTER");
    $.post({
      type: "POST",
      url: "/register",
      data: {"username": $("#register-username").val(),
             "email": $("#register-mail").val(),
             "password": $("#register-pass").val()},
      success(response) {
        var status = JSON.parse(response)["status"];
        if (status === "Successfully registered") { location.reload(); }
        else{message(status, true, "register-box");}


      }});
  });

    $(document).on("click", "#login-button", function() {
      console.log("LOGIN");
    $.post({
      type: "POST",
      url: "/login",
      data: {"username": $("#login-username").val(), 
             "password": $("#login-pass").val()},
      success(response) {
          var status = JSON.parse(response)["status"];
          if (status === "Successfully logged in") { location.reload(); }
          else{message(status, true, "login-box");}


    }});
  });

Это маршруты:

# ======== Routing =========================================================== #
# -------- Login ------------------------------------------------------------- #
@app.route('/login', methods=['GET', 'POST'])
def login():
    if current_user.is_authenticated:
        next_page = request.args.get("next")
        if not next_page or url_parse(next_page).netloc != "":
            next_page = url_for("home")
        return redirect(next_page)
    form = LoginForm()
    if request.method == 'POST':
        username = request.form['username']
        password = request.form['password']
        if not username or not password:
            print("Both fields required")
            return json.dumps({'status': 'Both fields required'})
        user = User.query.filter_by(username=username).first()
        if user is None or not user.check_password(password):
            print("Invalid username or password")
            return json.dumps({'status': 'Invalid username or password'})
        login_user(user, remember=True)
        print("Successfully logged in")
        return json.dumps({'status': 'Successfully logged in'})
    return render_template("login.html", title="Login", form=form)

# -------- Register Page ---------------------------------------------------------- #
@app.route('/register', methods=['GET', 'POST'])
def register():

    print(current_user.is_authenticated)
    if current_user.is_authenticated:
        return redirect(url_for('home'))
    form = RegistrationForm()
    if request.method == 'POST':
        print("OPRET BRUGER")
        name = request.form['name']
        location = request.form["location"]
        username = request.form["username"]
        email = request.form["email"]
        password = request.form['password']

        if not name or not location or not username or not email or not password:
            print("All fields required")
            return json.dumps({'status': 'All fields required'})

        if not User.query.filter_by(username=username).first() is None:
            print("Username taken")
            return json.dumps({'status': 'Username taken'})

        if not re.match(r"[^@]+@[^@]+\.[^@]+", email):
            print("Invalid email")
            return json.dumps({'status': 'Invalid email'})

        location = locator.geocode(location)
        if not location:
            print("Non-valid location")
            return json.dumps({'status': 'Non-valid location'})

        user = User(name=name, location=location, username=username, email=email)
        user.set_password(password)
        db.session.add(user)
        db.session.commit()
        login_user(user, remember=True)
        print("Successfully registered")
        return json.dumps({'status': 'Successfully registered'})

    return render_template("register.html", title="Register", form=form)

Это шаблон для сайта регистрации:

{% extends "base.html" %}
{% block body %}
<section class="hero is-white is-medium">
  <nav class="navbar is-transparent">
    <div class="navbar-brand">
      <a class="navbar-item" href="/">
        <h6 href="/" class="subtitle"><strong>Start</strong></h6>
      </a>
      <div id="navbar-burger-id" class="navbar-burger burger" data-target="navbar-menu-id">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
    <div id="navbar-menu-id" class="navbar-menu">
      <div class="navbar-end"></div>
    </div>
  </nav>
</section>
<title>Start</title>
<section class="hero is-primary is-bold is-medium">
  <div class="hero-body">
    <div class="container has-text-centered">
      <div class="columns">
        <div class="column is-auto">
          <br>
          <p class="title is-2">Start</p>
          <p class="subtitle is-4"><i>Connecting the bright minds of our world</i></p>     
        </div>
        <div class="column is-auto">
          <div id="register-box" class="register-box">
            <div class="signup-area">
              <p class="title">Opret bruger</p>
              <p> Allerede i besiddelse af en bruger?
              <a href="/login"><b>Log ind</b></a></p>
              <br>

              <div class="field">
                <p class="control has-icons-left has-icons-right">
                  <input id="register-name" class="input is-success" type="text" placeholder="Navn">
                  <span class="icon is-small is-left">
                    <i class="fa fa-user"></i>
                  </span>
                  <span class="icon is-small is-right">
                    <i class="fa fa-check"></i>
                  </span>
                </p>
              </div>

              <div class="field">
                <p class="control has-icons-left has-icons-right">
                  <input id="register-location" class="input" type="location" placeholder="Lokation">
                  <span class="icon is-small is-left">
                    <i class="fa fa-globe"></i>
                  </span>
                  <span class="icon is-small is-right">
                    <i class="fa fa-check"></i>
                  </span>
                </p>
              </div>

              <br>

            <div class="field">
                <p class="control has-icons-left has-icons-right">
                  <input id="register-username" class="input is-success" type="text" placeholder="Brugernavn">
                  <span class="icon is-small is-left">
                    <i class="fa fa-id-card"></i>
                  </span>
                  <span class="icon is-small is-right">
                    <i class="fa fa-check"></i>
                  </span>
                </p>
              </div>

              <div class="field">
                <p class="control has-icons-left has-icons-right">
                  <input id="register-mail" class="input is-success" type="text" placeholder="Email">
                  <span class="icon is-small is-left">
                    <i class="fa fa-envelope"></i>
                  </span>
                  <span class="icon is-small is-right">
                    <i class="fa fa-check"></i>
                  </span>
                </p>
              </div>

              <div class="field">
                <p class="control has-icons-left has-icons-right">
                  <input id="register-pass" class="input" type="password" placeholder="Adgangskode">
                  <span class="icon is-small is-left">
                    <i class="fa fa-lock"></i>
                  </span>
                  <span class="icon is-small is-right">
                    <i class="fa fa-check"></i>
                  </span>
                </p>
              </div>
              <br>
              <a id="register-button" class="form-button button is-primary is-inverted is-outlined">Opret bruger</a>
              <br>
              <br>
              <i><a id="feedback" class="feedback"></a></i>
              <br>

            </div>
          </div>
        </div>
      </div>
    </div>  
  </div>
</section>

{% include "footer.html" %}
{% endblock %}
{% block scripts %}
<script src="../static/js/auth.js"></script>
{% endblock %}

А это шаблон для входа на сайт:

{% extends "base.html" %}
{% block body %}
<section class="hero is-white is-medium">
  <nav class="navbar is-transparent">
    <div class="navbar-brand">
      <a class="navbar-item" href="/">
        <h6 href="/" class="subtitle"><strong>Start</strong></h6>
      </a>
      <div id="navbar-burger-id" class="navbar-burger burger" data-target="navbar-menu-id">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
    <div id="navbar-menu-id" class="navbar-menu">
      <div class="navbar-end"></div>
    </div>
  </nav>
</section>
<title>Start</title>
<section class="hero is-primary is-bold is-medium">
  <div class="hero-body">
    <div class="container has-text-centered">
      <div class="columns">
        <div class="column is-auto">
          <br>
          <p class="title is-2">Start</p>
          <p class="subtitle is-4"><i>Connecting the bright minds of our world</i></p>         
        </div>
        <div class="column is-auto">
          <div id="login-box" class="login-box">
            <div class="signup-area">
              <p class="title">Log ind</p>
              <p> Ikke registreret?
              <a href="/register"><b>Opret bruger</b></a></p>
              <br>

              <div class="field">
                <p class="control has-icons-left has-icons-right">
                  <input id="login-username" class="input is-success" type="text" placeholder="Brugernavn">
                  <span class="icon is-small is-left">
                    <i class="fa fa-user"></i>
                  </span>
                  <span class="icon is-small is-right">
                    <i class="fa fa-check"></i>
                  </span>
                </p>
              </div>

              <div class="field">
                <p class="control has-icons-left has-icons-right">
                  <input id="login-pass" class="input" type="password" placeholder="Adgangskode">
                  <span class="icon is-small is-left">
                    <i class="fa fa-lock"></i>
                  </span>
                  <span class="icon is-small is-right">
                    <i class="fa fa-check"></i>
                  </span>
                </p>
              </div>

              <br>
              <a id="login-button" class="form-button button is-primary is-inverted is-outlined">Log ind</a>
              <br>
              <br>
              <i><a id="feedback" class="feedback"></a></i>
            </div>
          </div>
        </div>
      </div>
    </div>  
  </div>
</section>
{% include "footer.html" %}
{% endblock %}
{% block scripts %}
<script src="../static/js/auth.js"></script>
{% endblock %}

PS

Надеюсь, что вы сможете ответить на мой вопрос. Пожалуйста, прокомментируйте, если я не предоставил достаточно информации и т. Д. c.

Хороших выходных!

Answer 1

Только что отредактировал jQuery до этого:

function message(status, shake=false, id="") {
  if (shake) {
    $("#"+id).effect("shake", {direction: "right", times: 2, distance: 8}, 250);
  } 
  document.getElementById("feedback").innerHTML = status;
  $("#feedback").show().delay(2000).fadeOut();
}

 $(document).on("click", "#register-button", function() {
   console.log("REGISTER");
    $.post({
      type: "POST",
      url: "/register",
      data: {"name": $("#register-name").val(),
             "location": $("#register-location").val(),
             "username": $("#register-username").val(),
             "email": $("#register-mail").val(),
             "password": $("#register-pass").val()},
      success(response) {
        var status = JSON.parse(response)["status"];
        if (status === "Successfully registered") { location.reload(); }
        else{message(status, true, "register-box");}


      }});
  });

    $(document).on("click", "#login-button", function() {
      console.log("LOGIN");
    $.post({
      type: "POST",
      url: "/login",
      data: {"username": $("#login-username").val(), 
             "password": $("#login-pass").val()},
      success(response) {
          var status = JSON.parse(response)["status"];
          if (status === "Successfully logged in") { location.reload(); }
          else{message(status, true, "login-box");}


    }});
  });

Теперь все работает ..