New class keeps old class behaviour

Question

I'm taking by first babysteps in jQuery and stumbled upon a problem I can't seem to get around.

I couldn't find an article that quite described what my problem was, so I would like to try to get an answer this way.

I don't understand why my objects keep behaving like their former class. When I setup a hover action for a class, and change the class of the object by clicking, jQuery keeps doing the animation for the new class.

I used toggleClass() and removeClass/ addClasswithout any result:

https://jsfiddle.net/biest9160/f0na6sro/

var wide = function() {
  $(this).animate({ 'width': '120px' }, 200);
}

var normal = function() {
  $(this).animate({ 'width': '100px' }, 200);
}

$(document).ready(function() {
  $('.class1').hover(wide, normal);

  $('.class1').click(function() {
    $(this).toggleClass('class1 class2');
  })
})

div {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  margin: auto;
}
.class2 {
  background: #555;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1" class="class1">box1</div>
<div id="box1" class="class1">box2</div>
<div id="box1" class="class1">box3</div>
<div id="box1" class="class1">box4</div>

I don't understand why the the hover action is triggered while the object has a new class.

This isn't an answer or really related to your problem. But you will want to avoid using id's with the same name, for example `id="box1" `. These should all be unique, just FYI. — khollenbeck, May 11 '15 at 14:07
With the content of the div incrimenting the box number, I'm assuming the OP just forgot to change the ID number ^^. — Callum., May 11 '15 at 14:30
I was a bit to fast copy/pasting this code to JSFiddle. Thanks anyway! ;) — Biest, May 11 '15 at 14:46

score 3 · Accepted Answer · edited May 23 '17 at 12:22

Initialy you attach the event to the element with the class name. After the class is changed the event remains on the element.

To remove the event you can use .unbind. To remove .hover event you can check this answer.

A working example using .unbind to remove the event and after to reattach it will look like in the snippet (basically is toggle hover event):

var wide = function(){
    $(this).animate({'width':'120px'},200);
}

var normal = function(){
    $(this).animate({'width' : '100px'},200);
}

$(document).ready(function(){
    $('.class1').hover(wide,normal);
    
    $('.class1').click(function(event){
        var $this = $(this);
        $this.unbind('mouseenter mouseleave'); // remove hover
        if( $this.hasClass('class2'))
        {
            $this.hover(wide, normal); // reattach hover
        }
        $this.toggleClass('class1 class2');
    })
})

div{
    width:100px;
    height:100px;
    border: 1px solid #000;
    margin: auto;
}

.class2{
    background: #555;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1" class="class1">box1</div>
<div id="box1" class="class1">box2</div>
<div id="box1" class="class1">box3</div>
<div id="box1" class="class1">box4</div>

score 1 · Answer 2 · edited May 11 '15 at 14:28

1

Use .on() menthod to bind the event which will actually bind the event on the parent of the class.

Here is the example:

$(document).on("click", '.class1', function(){
        $(this).toggleClass('class1 class2');
    });

This will defiantly work...

edited May 11 '15 at 14:28

Pointy

405,095
59
585
614

answered May 11 '15 at 14:12

Ashish Kumar

2,991
3
18
27

New class keeps old class behaviour

2 Answers2