Функция продолжает работать повторно JQuery

Question

У меня есть глупый простой JQuery .js-файл. Я занят созданием, и я застреваю на первом шаге.

В настоящее время у меня есть настройка, как показано ниже, и каждый раз, когда я нажимаю единственную кнопку на странице (кнопка отправки страницы входа в систему), она перезагружает всю страницу и снова запускает первую функцию.

Как я получить функцию только один раз запустить

$(document).ready(function() { 
    // 
    // FUNCTIONS 
    // 

    function AllFade() { 
     //Hide everything 
     $('div').hide() 

     //Fade Everything in 
     $('div').fadeIn(1000); 

     //Hide All Alerts 
     $('.alert').hide(); 
    } 

    function LoginCheck() { 
     //Check username and pass 
    } 

    // EVENTS  

    //START SEQUENCE 
    AllFade(); 

    //Login check on submit 
    $('.btn').click(function() { 
     LoginCheck(); 
    }) 
}); 

!! EDIT !!

кодирование баттона это точно:

<button class="btn btn-large btn-primary">Sign in</button> 

Would, что до сих пор вызывает перезагрузку?

Answer 1

Вам необходимо предотвратить отправку (событие) формы с помощью .preventDefault(), чтобы она не выполняла по умолчанию: отправьте форму и перезагрузите страницу.

$('.btn.btn-large.btn-primary').click(function(event) { 
    //if only button on page you can have just $('button') 
    event.preventDefault() 
    LoginCheck(); 
}) 

Вы также можете добавить type="button", если вы не хотите использовать button в качестве кнопки отправки, поскольку кнопка элемент имеет тип по умолчанию представить:

<button type="button" class="btn btn-large btn-primary">Sign in</button> 

Вы можете прочитать здесь:

jQuery docs: .preventDefaul()

Answer 2

Добавить событие и использовать .preventDefault(), чтобы предотвратить перезагрузку страницы.

$('.btn').click(function(e) { 
    e.preventDefault(); 
    LoginCheck(); 
});