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