Question

这是我在这里找到的一个脚本，我从.live更改为.on

我有一个附加了类登录的锚点，注销将使用jquery打开一个表单，并更改当前锚点的文本和类，以便注销。

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

单击时，它可以正常工作，一切都已更改，但是当我再次单击该锚点时，它将不会激活注销功能。我知道它与jquery或dom需要刷新本身有关，但我不知道如何让它工作？

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

我也在下面编写了自己的一个，这是一种替代方法，但问题是旧类在更改时仍然有效。

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

});

非常感谢任何关于以太法的帮助，谢谢。

Answer 1

更改元素的类不会更改绑定到它的事件。事件委派将更接近您的要求：

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

此外，不要使用.attr更改元素的类，而是使用.addClass（）,. removeClass和/或.toggleClass。

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

考虑到这一点，您可以使用以下方法简化整个过程：

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

你可以用：

缩小它

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

Answer 2

你应该这样做：

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

Answer 3

对于所有想要查看我的结果的人来说，这是我在Kevin B的帮助下想要做的一个有效例子。

谢谢大家

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

jQuery切换按钮不起作用.on（'click'）

3 个答案: