0

这是我在这里找到的一个脚本，我将它从 .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);
            }
        }                   
    }); 

});

任何有关以太方法的帮助将不胜感激，谢谢。

4

3 回答 3

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");
});
于 2013-02-14T19:28:19.877 回答
0

对于所有想看到我的结果的人，这是我想在 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;
});
于 2013-02-14T21:48:56.390 回答
0

你应该做：

 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();
    });
于 2013-02-14T19:20:27.823 回答