toggleClass for different functions

Question

I guess this code does not work, because at DOM load jQuery caches its objects and bind the functions to them?

$('span.button.slide_out').on('click', function () {
    $(this).toggleClass('slide_out').toggleClass('slide_in');
    $('#testbox').slideDown();
});

$('span.button.slide_in').on('click', function () {
    $(this).toggleClass('slide_out').toggleClass('slide_in');
    $('#testbox').slideUp();
});

I know I could write this easily with slideToggle or something else, but I have to fire different actions on every first and every second click. How can I achieve this using the same selector (instead of creating two different selectors)?

JS FIDDLE

possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — JJJ, Jun 30 '15 at 10:06
Sorry I do not understand how the possible duplicate would answer my question. Maybe I am to stuck inside the box! Thanks a lot @Learner for your solution! — Marian Rick, Jun 30 '15 at 10:18

score 1 · Accepted Answer · answered Jun 30 '15 at 10:23

The binding is indeed done on DOM creation, but that doesn't have to be a problem in this case, it also means that the button is still clicked if it no longer has the slide_out class. Therefore you can reuse the same click event and check the current state to choose whether to slide up or down. For example:

$('.slide_out').on('click', function () {
  if($(this).toggleClass('slide_out slide_in').hasClass('slide_in'))
     $('#testbox').slideDown();
  else
     $('#testbox').slideUp(); 
});

Fiddle

Thanks a lot for your time! – Marian Rick Jun 30 '15 at 10:25 — Marian Rick, Jun 30 '15 at 10:25

score 1 · Answer 2 · edited May 23 '17 at 10:26

You could use the solution from Event binding on dynamically created elements?, as suggested by https://stackoverflow.com/users/502381/juhana:

HTML:

<span class="button_container"><span class="button slide_out">Click me</span></span>
<div id="testbox">Whohoohoooo, I am slidiiing!<br><br><small>Hey… wait! Why I am not sliding up again?</small></div>

JS:

$('.button_container').on('click', '.slide_out', function () {
    $(this).toggleClass('slide_out').toggleClass('slide_in');
    $('#testbox').slideDown();
});

$('.button_container').on('click', '.slide_in', function () {
    $(this).toggleClass('slide_out').toggleClass('slide_in');
    $('#testbox').slideUp();
});

http://jsfiddle.net/ag3cpcfb/

But, in my opinion it would be better to make your code simpler by using slideToggle() and adjust your css classes:

HTML:

<span class="button">Click me</span>
<div id="testbox">Whohoohoooo, I am slidiiing!<br><br><small>Hey… wait! Why I am not sliding up again?</small></div>

JS:

$('.button').on('click', function () {
   var $testbox = $('#testbox');

    if ($testbox.is(':visible')) {
        console.log('Click 1');
    } else {
        console.log('Click 2');
    }

    $(this).toggleClass('slide_in');
    $testbox.slideToggle();
});

http://jsfiddle.net/k77ferjh/

But this fires "Click 1" all of the time if you repeatedly click on the button. If this is not an issue, fine, if it is, you can also use a number to keep track of your clicks:

JS:

var clicks = 0;

$('.button').on('click', function () {
    clicks++;

    if (clicks % 2 == 0) {
        console.log('Slide out');
    } else {
        console.log('Slide in');
    }

    $(this).toggleClass('slide_in');
    $('#testbox').slideToggle();
});

http://jsfiddle.net/k77ferjh/1/

toggleClass for different functions

2 Answers2