Question

How can I prevent this function from calling itself again:

$(document).ready(function() {  
    login();
});

function login() {
    $('#login').hide();
    $('#pre-login button').on('click',function(event) {
        $('#pre-login').hide();
        $('#login').show();
        $('#login :text').focus();
        return false;
    });
}

I have these two forms:

<form id="pre-login"><p>Already have an account?</p><button type="submit">Login</button></form>
<form id="login">
    <input type="text" placeholder="Email Address" class="login">
    <input type="password" placeholder="Password" class="login"><h4><a href="#">Forgot?</a></h4>
    <button type="submit" class="action">Login</button>
</form>

The first form is displayed when the page has been load, while the second form is set to hidden. Upon clicking the login button on the first form the second form is shown, making the first hidden. However, clicking the login button on the second form is causing a reverse effect, even though I’m telling jQuery to only call the function when a button of #pre-login form is clicked.

I can’t make heads or tails what’s going on here so I’m thinking maybe it’s just best to disable the function once it’s been called once.

Answer 1

You can use one method:

Attach a handler to an event for the elements. The handler is executed at most once per element.

function login() {
    $('#login').hide();
    $('#pre-login button').one('click',function(event) {
        $('#pre-login').hide();
        $('#login').show();
        $('#login :text').focus();
        return false;
    });
}