If hasClass condition not working after Updating Class with jQuery

Question

Here is jQuery condition if hasclass not working when i update class from Jquery, What is reason ? Means if i change / Update class then also Jquery if condition working on click, Rather it should not work after that.

in my case, first of all the div Some Content has class .L2D1 that's color is blue okay, then my jQuery condition is if Some Content has class .L2D1 means till its color is blue then it should should change the color of Some Other Content div that's red.

But when i changed the class .L2D1 from jQuery Onclick change class button, then it's class changed into .newClass then also my jQuery if condition working Why?

Where i am making mistake, plz make it solve. literally I don't able to get actual problem.

See this:

$('.ChangeClass').click(function () {
$(".L2D1").attr('class', 'newClass');
}); 

$(document).ready(function(){
    if ($("#L2D1-id").hasClass("L2D1")) {
    $('.ChangeColor').click(function () {
        $(".Layout-2").addClass('intro');
    });     
} 
});

.intro {
  font-size: 120%;
  color: red;
}

.newClass {
  font-size: 120%;
  color: green;
}

.L2D1 {
  font-size: 100%;
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="L2D1" id="L2D1-id"> Some Content </div>


<div class="Layout-2"> Some Other Content </div>

<button class="ChangeClass">Change Class</button>
<button class="ChangeColor"> <!-- if ($("#L2D1-id").hasClass("L2D1")) Then { -->  Change Color</button>

Move the if block within the event handler, like Mohamed-Yousef's original comment recommended. — Heretic Monkey
– Heretic Monkey, Commented Mar 2, 2021 at 16:21

R3tep · Accepted Answer · 2021-03-02 16:24:54Z

2

Your event is created when your script is loaded. So the if statement is never tested after

To solve it you can put the if statement into your event, like :

$('.ChangeClass').click(function() {
  $(".L2D1").attr('class', 'newClass');
});

$(document).ready(function() {

  $('.ChangeColor').click(function() {
    if ($("#L2D1-id").hasClass("L2D1")) {
      $(".Layout-2").addClass('intro');
    }
  });

});

.intro {
  font-size: 120%;
  color: red;
}

.newClass {
  font-size: 120%;
  color: green;
}

.L2D1 {
  font-size: 100%;
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="L2D1" id="L2D1-id"> Some Content </div>


<div class="Layout-2"> Some Other Content </div>

<button class="ChangeClass">Change Class</button>
<button class="ChangeColor"> <!-- if ($("#L2D1-id").hasClass("L2D1")) Then { -->  Change Color</button>

edited Mar 2, 2021 at 16:24

answered Mar 2, 2021 at 16:18

R3tep

12.9k10 gold badges52 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

If hasClass condition not working after Updating Class with jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related