函数不断重复运行Jquery答案

【问题标题】：Function keeps running repeatedly Jquery函数不断重复运行Jquery
【发布时间】：2013-09-04 19:52:09
【问题描述】：

我有一个愚蠢的简单 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>

这还会导致重新加载吗？

【问题讨论】：

您的按钮是带有 href="" 的锚标记，因此它会转到当前页面“”，从而导致重新加载。这是锚标记的默认行为。
Prevent a link to reload page的可能重复

标签： javascript jquery function document-ready

【解决方案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()

【讨论】：

虽然行为相似（相同），但被调用的preventDefault 并不是原生事件。它是 jQuery 的 Event。我不认为 MDN 是引用的正确位置。 api.jquery.com/event.preventDefault
好点@Ian，MDN 在我的搜索中排在第一位。刚改正。谢谢
编辑了主要问题。请再次检查@Sergio
@Sergio，按原样工作。非常感谢您的帮助！ :D

【解决方案2】：

在那里添加一个事件并使用.preventDefault()来防止页面重新加载。

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

【讨论】：