How to add something after addClass happen

Question

I have div and button. when i click button this div adds class and its width become 150px; I want that when this div become 150px show something in console.log. but this console dont be shown until div becomes 150px; can someone help me please? can u show me code example? here is code what i have now:

html:

<div class="test"></div>
<button class="button">BUTTON</button>

Js:

$('.button').click(function(){
$( ".test" ).addClass( "addTest" );
})

CSS:

.test{
width:0px;
}
.addTest{
   width:150px;
}

you want when your div has class `addTest` do something ? if yes simply write `if($(".test").hasClass("addTest")){ // do something }` — Swati, Aug 22 '20 at 13:40
so what do you want to achieve here ? can you elaborate more — Swati, Aug 22 '20 at 13:48
Given the code/css provided when you add `addTest` class, it *immediately* becomes 150px so you can just add some code directly after `.addClass`. Is there any reason it doesn't do this? Something you've not included? (eg a css transition) — freedomn-m, Aug 22 '20 at 17:06

HOK · Answer 1 · 2020-08-22T14:09:53.010

0

There are two possibilities:

Exactly what you asked for, can be achieved by just adding the console.log() command after you call the addClass:

$(".button").click(function(){
    $( ".test" ).addClass( "addTest" );
    console.log("Test!");
})

But I assume you want to react on the size of the element, without regarding what changed the size? In this case, you need to introduce some additional framework. Have a look here: How to detect DIV's dimension changed?

According to your update in the comments. I'd go like this:

$(".button").click(function(){
    $( ".test" ).addClass( "addTest" );
    if($( ".test" ).css("margin-left")=="180px"){
        console.log("Test!");
    }
})

edited Aug 22 '20 at 14:09

answered Aug 22 '20 at 13:43

HOK

225
1
11

I don't understand what you want to achieve. With the code you showed in your question, the class will be added immediately. The div will get the new width instantly. What shall the console.log() wait for? – HOK Aug 22 '20 at 13:48
1

i want when div margin-left become 180px show console. but when this dont happened console dont showed – სალი სულაბერიძე Aug 22 '20 at 13:57
As addClass is synchronous ( https://code.jquery.com/jquery-3.1.1.js ), you can check if it happened after adding the class and then act accordingly. I updated my answer with an example. – HOK Aug 22 '20 at 14:11

How to add something after addClass happen

1 Answers1