jQuery的切换按钮不工作。对（“点击”）

Question

这是一个脚本，我发现在这里，这是我从.live改变。对

我有附加类的登录锚，注销将打开一个使用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

对于所有谁希望看到我的结果，这是我想在凯文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; 
});