jQuery toggle button not working .on('click')

Question

this is a script i found here, which i changed from .live to .on

I have an anchor with a class login attached, the logout will open a form using jquery, and change the text and class of the current anchor, to logout.

<li><a href="javascript:void(0)" class="login">Login</a></li>

When clicked it works all fine, everything is changed, but when i click on that anchor again it will not active to logout function. I know it has something to do with jquery or dom needing to refresh itself, but i don't know how to make it work?

function onSignOutClicked() {
    // Convert the clicked button into a sign-in button
    $(this)
        .attr('class', 'login')
        .attr('title', 'Login')
        .text('Sign in');
}

function onSignInClicked() {
    // Convert the clicked button into a sign-out button
    $(this)
        .attr('class', 'logout')
        .attr('title', 'Logout')
        .text('Sign out');
}

$('.logout').on("click", onSignOutClicked);
$('.login').on("click", onSignInClicked);

i have also written my own one below, which is an alternative method, but here the problem is that the old class is still working when it was changed.

$(".sendLoginForm").click(function(){
    $("#loginErr").html("");
    $(".sendLoginForm").css({"color":"#ff3019"});
    $(".sendLoginForm").spin("small", "#FFF");                          
    $.ajax({  
        type: "POST",  
        url: "../_/login.php",  
        data: $("#loginForm").serialize(),  
        dataType: "json",  
        success: function(data){
            if (data.err){
                $("#loginErr").html(data.err);
            }else{
                //$(".openLoginForm").closest('li').remove();
                //$(".ulNavigator").append('<li><a href="javascript:void(0)" class="logout">Logout</a></li>');
                //$('.openLoginForm').toggleClass('.logout')
                //$(".openLoginForm").removeClass('.openLoginForm').addClass('logout');
                $(".openLoginForm").toggleClass('openLoginForm logout');
                $('.login').fadeOut("fast");
                $(".success").html(data.success);
                $('.success').fadeIn("fast");
                $('#loginForm')[0].reset();
                setTimeout(function() {
                      $('.success').fadeOut("fast");
                }, 3000);
                }
            $(".sendLoginForm").spin(false);
            $(".sendLoginForm").css({"color":"#FFF"});
        }                       
    });
    return false;
});

$(document).on("click", ".logout", function(){
    $.ajax({  
        type: "POST",  
        url: "../_/logout.php",  
        data: {logout : "kick"},  
        dataType: "json",  
        success: function(data){
            if (data.success){
                $(".success").html(data.success);
                $(".success").fadeIn("fast");
                setTimeout(function() {
                      $('.success').fadeOut("fast");
                }, 3000);
            }
        }                   
    }); 

});

Any help on ether method would be much appreciated, thank you.

Answer 1

For all who want to see my result, this is a working example of what i wanted to do with the help of Kevin B.

Thank you all

$(".login,.logout").on("click",function(){
    var $this = $(this);
    if ( $this.is(".login") ) {
        $(".loginFormBox").fadeIn("fast");      
    }
    else {
        $this.text("Login");
        $this.toggleClass("login logout");
        $.ajax({  
        type: "POST",  
        url: "../_/logout.php",  
        data: {logout : "kick"},  
        dataType: "json",  
        success: function(data){
            if (data.success){
                $(".success").html(data.success);
                $(".success").fadeIn("fast");
                setTimeout(function() {
                      $('.success').fadeOut("fast");
                }, 3000);
            }
        }                   
        }); 
    }    
});

$(".sendLoginForm").click(function(){
    $("#loginErr").html("");
    $(".sendLoginForm").css({"color":"#ff3019"});
    $(".sendLoginForm").spin("small", "#FFF");                          
    $.ajax({  
        type: "POST",  
        url: "../_/login.php",  
        data: $("#loginForm").serialize(),  
        dataType: "json",  
        success: function(data){
            if (data.err){
                $("#loginErr").html(data.err);
            }else{
                $(".login").toggleClass("login logout");
                $(".logout").text("Logout");
                $('.loginFormBox').fadeOut("fast");
                $(".success").html(data.success);
                $('.success').fadeIn("fast");
                $('#loginForm')[0].reset();
                setTimeout(function() {
                      $('.success').fadeOut("fast");
                }, 3000);
                }
            $(".sendLoginForm").spin(false);
            $(".sendLoginForm").css({"color":"#FFF"});
        }                       
    });
    return false;
});

Answer 2

Changing the class of an element won't change what events are bound to it. Event Delegation would be closer to what you want:

$(document).on('click','.logout',onSignOutClicked);
$(document).on('click','.login',onSignInClicked);

Additionally, don't change the class of an element using .attr, instead use .addClass(), .removeClass, and/or .toggleClass.

$(this).addClass("logout").removeClass("login")

with that in mind, you can simplify the whole process with:

$(".login,.logout").on("click",function(){
    var $this = $(this);
    $this.toggleClass("login logout");
    if ( $this.is(".login") ) {
        $this.attr("title","Login");
    }
    else {
        $this.attr("title","Logout");
    }    
});

and you can make it smaller with:

$(".login,.logout").on("click",function(){
    var $this = $(this);
    $this.toggleClass("login logout");
    $this.attr("title", $this.is(".login") ? "Login" : "Logout");
});

Answer 3

you should do:

 function onSignOutClicked() {
        // Convert the clicked button into a sign-in button
        $(this)
            .attr('class', 'login')
            .attr('title', 'Login')
            .text('Sign in');
    }

    function onSignInClicked() {
        // Convert the clicked button into a sign-out button
        $(this)
            .attr('class', 'logout')
            .attr('title', 'Logout')
            .text('Sign out');
    }

    $('.logout').on("click", function(){ 
    onSignOutClicked();
    });
    $('.login').on("click", function(){ 
    onSignInClicked();
    });