jqueryを使って動的に要素のクラスを更新するには？

Question

 <div class="form-group">    
     <button type="submit"id="form_submit"> 
      <span class="glyphicon glyphicon-user"></span> Sign Up 
     </button>    
     <a style="cursor:pointer;" class="click_login">Already signed up! Then Login</a> 
    </div> 

jqueryの：私はリンクをクリックすると

$(document).ready(function(){ 
    // form click login 
    $(".click_login").on("click",function(){ 

     $(this).html("New Member! Then Sign Up"); 
     $(this).removeClass('click_login').addClass('click_signup'); 
     alert($(this).attr("class")); 
     $("#form_submit").html('<span class="glyphicon glyphicon-log-in"></span> Login');   
    }); 

    // form click signup 
    $(".click_signup").on("click",function(){ 

     $(this).html("Already signed up! Then Login"); 
     $(this).removeClass('click_signup').addClass('click_login'); 
     $("#form_submit").html('<span class="glyphicon glyphicon-user"></span> signup');   
    }); 
    }); 

、それはボタンをログインに変更します。しかし、それがjqueryによって更新されると、リンクを再びクリックすると、新しいクラスに変更されずにサインアップボタンが表示されます。新しいクラスはjquery経由で更新されていますが、on click関数は同じ要素の新しいクラスセレクタをトリガーしません。

Answer 1

// form click signup 
    $(document).on("click",".click_signup",function(){ 

     $(this).html("Already signed up! Then Login"); 
     $(this).removeClass('click_signup').addClass('click_login'); 
     $("#form_submit").html('<span class="glyphicon glyphicon-user"></span> signup');   
    }); 

をお試しください

Answer 2

使用$（文書）.on（ "クリック"）、動的に追加されたコンテンツのためのイベント：

$(document).on("click",".click_login",function(){ 
     $(this).html("New Member! Then Sign Up"); 
     $(this).removeClass('click_login').addClass('click_signup'); 
     alert($(this).attr("class")); 
     $("#form_submit").html('<span class="glyphicon glyphicon-log-in"></span> Login');   
    }); 

    // form click signup 
    $(document).on("click",".click_signup",function(){ 

     $(this).html("Already signed up! Then Login"); 
     $(this).removeClass('click_signup').addClass('click_login'); 
     $("#form_submit").html('<span class="glyphicon glyphicon-user"></span> signup');   
    });