CODEWITHSUNDEEP
jqueryhtml
Learning
Learning

Reputation: 868

How to update element's class dynamically using jquery?

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

When I click on a link, it changes to Login button. But once it is updated via jquery, When I click on a link again, it doesn't change to new class to get Sign up button. New class is getting updated via jquery,but on click function doesn't trigger new class selector of the same element.

Upvotes: 0

Views: 52

Answers (2)

Flowerking
Flowerking

Reputation: 2581

Try 

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

Upvotes: 1

Jayesh Chitroda
Jayesh Chitroda

Reputation: 5049

USe $(document).on("click") event for dynamically added content:

    $(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');         
    });

Upvotes: 2

Related Questions