removeclass() and addClass() not working using ajax

Question

I am having problem with addClass() and removeClass() function in jquery. When i use the function it was replace the classes. but it was not calling the addded class functions. here is my query

HTML Code :

<div class="animation1 popbutton">Click Me</div>

Jquery :

$(".animation1").click(function(){ 
   // my first function 
 });

$(".animation2").click(function(){ 
   // my second function 
 });

and my add and remove class functions are,

$.ajax({
    url : 'file.php',
    data : postdata,
    type : 'post',
    success : function (saveresponseText)
    {
        $(".animation1").removeClass("animation1").addClass("animation2").html("Clicked");
    } 
});

if click the animation1 it will call the ajax function and it will replace the classname as animation2 and it has some separate function. how can do this? Someone suggest a solution please.

Thanks in Advance,

Put your ajax code in a function and called that function inside the event. — Anirudha Gupta, Nov 03 '15 at 11:41
$(".popbutton").removeClass("animation1").addClass("animation2").html("Clicked"); — MaThar Beevi, Nov 03 '15 at 11:43
You need to attach the listener when the class is added, not before — baao, Nov 03 '15 at 11:44
When i see the action in console, the class name was replaced as `animation3`. but the action is not happen. It always call the `$(".animation1").click(function(){ // my first function });` action only. But i need to call the second after ajax returns. — skr07, Nov 03 '15 at 11:47

score 3 · Answer 1 · edited Nov 03 '15 at 11:46

3

When you write

$(".animation1").click(function(){ 
   // my first function 
 });

jQuery find the element with this class and adds a clickhandler to it. The function is not bound to the css-class.

I would suggest you either add a clickhandler in your ajax response, or have 2 buttons which you can hide / and show

edited Nov 03 '15 at 11:46

baao

71,625
17
143
203

answered Nov 03 '15 at 11:44

Fraction

463
2
11

score 2 · Answer 2 · answered Nov 03 '15 at 11:59

2

Try to add the event handler through document:

$(document).on('click','.animation2',function(){ 
   // my second function 
});

answered Nov 03 '15 at 11:59

SSS

92
4

Krupesh Kotecha · Answer 3 · 2015-11-03T11:58:50.590

problem is that your ajax is not returning success check the console logs. actually problem was not with addClass and removeClass. see the example below.

in this example when you click on text click me it will call ajax request and ajax will result error so that code written in error is excecuted

$(document).ready(function() {
  $(".animation1").click(function() {
    // my first function 
    clk()
  });

  $(".animation2").click(function() {
    // my second function 
  });

  function clk() {
    $.ajax({
      url: 'file.php',
      type: 'post',
      success: function(saveresponseText) {},
      error: function(status) {  $(".animation1").removeClass("animation1").addClass("animation2").html("Clicked");
      }
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animation1 popbutton">Click Me</div>

removeclass() and addClass() not working using ajax

3 Answers3