CODEWITHSUNDEEP
jquery
Thai Tran
Thai Tran

Reputation: 9935

Trigger different event after changing class - Jquery

On my html page, there is a button which initially have the class name "show-update". After clicking on that button, that button will be changed to another class name and i want to set another clicking event to that particular class. However, i am still not successful to do that. Is there anyone know how to fix it ? I am using jquery 1.72

This is my code http://jsfiddle.net/dwGCH/1/

Upvotes: 1

Views: 1009

Answers (4)

Cranio
Cranio

Reputation: 9847

I'm not sure to have understood, this code toggles two handlers on each click:

 $('.update-profile').on('click', function(){
    alert('updated');
 });

$(".show-update").on('click', fn1);

function fn1(event)
{             
     // some function here
     // ...           
     $(this).addClass("update-profile");
     $('.update-profile').removeClass("show-update");
     $(this).off('click');
    $(this).on('click', fn2);
     alert('fn1');
}
function fn2(event)
{             
     // some function here
     // ...           
     $(this).removeClass("update-profile");
     $('.update-profile').addClass("show-update");
     $(this).off('click');
    $(this).on('click', fn1);
     alert('fn2');
}

Upvotes: 0

adeneo
adeneo

Reputation: 318212

$(document).on('click', '.update-profile', function(){
    alert('updated');
 });

 $(".show-update").on('click', function(e){ 
     // some function here
     // ...           
     $(this).addClass("update-profile").removeClass("show-update").off('click');
     alert('change to update');
 });​

FIDDLE

Upvotes: 1

Kurt
Kurt

Reputation: 7212

I have updated the JSFiddle http://jsfiddle.net/dwGCH/3/

   $('.show-update').click(function() {
      $(this)
      .addClass('update-profile')
      .removeClass("show-update")
      .unbind()
      .click(function() {
         alert('updated'); 
      });
      alert('change to update'); 
   });

Upvotes: 1

Chris Clower
Chris Clower

Reputation: 5104

Here's a fiddle: http://jsfiddle.net/dwGCH/9/

Add a click event first to the temporary class, and then one to the button class which only fires if the updated class is present.

Upvotes: 1

Related Questions