javascript - 函数不断重复运行 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();
    })
});

!! 编辑 !!

按钮的编码是这样的:

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

这还会导致重新加载吗？

Answer 1

您需要使用 .preventDefault() 来阻止表单的提交(事件)，这样它就不会执行默认行为:提交表单并重新加载页面。

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

如果你不想使用button作为提交按钮，你也可以添加type="button"，因为按钮元素有一个默认的提交类型:

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

您可以在这里阅读更多内容:

jQuery 文档:.preventDefaul()