jQuery id and class selector after changing class

Question

I am new to this forum and also fairly new to jQuery so it is (as I think) a basic question but I could not find the answer and everything I tried did not work. I have a button on a page that should do certain things and change the class. And with the new class revert those things. This is the code: ``` $("#info_button.buttonOff").click(function() { $(".content").slideUp(300, function() { $("#info").slideDown(300); $("#info").addClass("contentOn"); $("#info_button").removeClass("buttonOff").addClass("buttonOn"); $("#overlay").fadeIn(300); }); }); $("#info_button.buttonOn").click(function() { $(".content").slideUp(300); $("#info").removeClass("contentOn"); $("#info_button").removeClass("buttonOn").addClass("buttonOff"); $("#overlay").fadeOut(300); }); ``` The first event alone work. But as soon as I add the second event nothing works anymore. I think I have to do something with .unbind() but could not figure out how. Please help.

Accepted Answer

The problem is that the jQuery collection is computed only once.

Use

```
$(document).on('click', "#info_button.buttonOff", function() {
```

and

```
$(document).on('click', "#info_button.buttonOn", function() {
```

With this, the selector will be tested everytime a click occurs.

As your element has an ID, a lighter solution could be

```
$("#info_button").click(function() {
    if ($(this).hasClass('buttonOn')) {
       // do something
    } else {
       ...
```

But I'd generally prefer the first one.

jQuery id and class selector after changing class

Solution

Problem