Ajax работает только один раз при отправке формы

Question

Я пытаюсь создать виджет входа в систему, который использует ajax на стороне пользователя Wordpress. Я создал форму, ajax и ответ. Форма работает только один раз во время тестирования (в настоящее время я просто проверяю ответы на запрос ajax).

Вот мой код:

Форма:

<form class="fs-login" autocomplete="off" novalidate method="post">
<div class="uk-child-width-auto">
    <div>
        <div class="uk-card uk-card-default uk-card-small uk-card-body">
            <div class="uk-inline uk-width-1-1">
                <span class="uk-form-icon" uk-icon="icon: user"></span>
                <input class="uk-input uk-form-small" name="username" type="text">
            </div>
            <div class="uk-inline uk-width-1-1">
                <span class="uk-form-icon" uk-icon="icon: lock"></span>
                <input class="uk-input uk-form-small" name="password" type="password">
            </div>
            <button id="fs-login-button" type="submit" class="uk-button uk-button-small uk-width-1-1">Login</button>
        </div>
        <div class="uk-text-small uk-text-center">
            Not registered? <br/><a href="#">Create an account</a>
        </div>
    </div>
</div>

Jquery:

jQuery(document).ready(function($){
'use strict';

$('.fs-login').on('click', '#fs-login-button', function (){

    var username = $("input[name=username]").val();
    var password = $("input[name=password]").val();

    // if(username.length > 0) {

        $.ajax({

            method: "POST",

            url: ajaxurl,

            data: { 

                'action'        : 'ajaxlogin',

                'username'      : username,

                'password'      : password

            },

            success: function(data){

                if (data.success == true){

                    alert('pass');

                } else {

                    alert('fail');

                }

            }

        });

    // } else {

    //  alert('You have to enter your username');

    // }

});

});

Вот моя функция:

public function ajax_login(){

    $data = array( 'success'=>true );

    wp_send_json( $data );

    wp_die();

}

Да, у меня есть следующие коды, добавленные в мои files:

wp_localize_script( $this->plugin_name, 'ajaxurl', admin_url( 'admin-ajax.php' ) );

В дополнение к:

$this->loader->add_action( 'wp_ajax_ajaxlogin', $plugin_public, 'ajax_login' );
$this->loader->add_action( 'wp_ajax_nopriv_ajaxlogin', $plugin_public, 'ajax_login' );

Как я уже сказал, функции ajax работают нормально при первом запуске. Я получаю всплывающее окно с предупреждением jQuery. Во второй раз, когда я запускаю программу, всплывающее окно не появляется, и скрипт, кажется, отправляет и загружает новую страницу без анализируемых функций.

Любая помощь всегда приветствуется.

Майк

Answer 1

Просто взглянув на него, я думаю, вы можете сделать две вещи:

1. вернуть false в обработчике отправки, например:

<form onsubmit="return false;" ...

Возможно, вам также нужно расширить свой обработчик кликов, например:

... '#fs-login-button', function (e){ e.preventDefault()

Чтобы предотвратить отправку формы, отличной от ajax, вы должны это сделать в Google