title: jQuery toggle button not working .on('click')
body: <p>this is a script i found here, which i changed from .live to .on</p>
  
  <p>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.</p>
  
  <pre><code>&lt;li&gt;&lt;a href="javascript:void(0)" class="login"&gt;Login&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>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?</p>
  
  <pre><code>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);
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>$(".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('&lt;li&gt;&lt;a href="javascript:void(0)" class="logout"&gt;Logout&lt;/a&gt;&lt;/li&gt;');
                  //$('.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);
              }
          }                   
      }); 
  
  });
  </code></pre>
  
  <p>Any help on ether method would be much appreciated, thank you.</p>