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();
})

如果您不想将type="button"用作提交按钮，也可以添加button，因为按钮元素具有默认的提交类型：

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

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

jQuery文档：.preventDefaul()

Answer 2

在其中添加一个事件并使用.preventDefault()来阻止该页面重新加载。

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

函数反复运行Jquery

2 个答案: