why my jquery won't work?

Question

I have a problem with my query code. I'm creating a simple slider and when I was creating the #prev button function it didn't work but it worked with my #next button, why is this? When I remove the #prev handler it works normally only with #next . Here is the code :

$(document).ready(function () {
    // set options 
    var speed = 500;
    var autoswitch = true;
    var autoswitch_speed = 4000;

    $('.slide').first().addClass('active'); // add the initial active class
    $('.slide').hide(); // hide all slides 
    $('.active').show(); // show first slide

    // when the next/prev button clicked
    $('#next').on('click', function () {
        $('.active').removeClass('active').addClass('oldActive');
        if ($('.oldActive').is(':last-child')) {
            $('.slide').first().addClass('active');
        } else {
            $('.oldActive').next().addClass('active');
        };

        $('.oldActive').removeClass('oldActive');
        $('.slide').fadeOut(speed);
        $('.active').fadeIn(speed);

        $('#prev').on('click', function () {
            $('.active').removeClass('active').addClass('oldActive');
            if ($('.oldActive').is(':last-child')) {
                $('.slide').first().addClass('active');
            } else {
                $('.oldActive').next().addClass('active');
            };

            $('.oldActive').removeClass('oldActive');
            $('.slide').fadeOut(speed);
            $('.active').fadeIn(speed);
        });
    });

Answer 1

You have inserted the .prev button click event on .next button click event

 $(document).ready(function () { // set options var speed = 500; var autoswitch = true; var autoswitch_speed = 4000; // add the initial active class $('.slide').first().addClass('active'); // hide all slides $('.slide').hide(); // show first slide $('.active').show(); // when the next/prev button clicked $('#next').on('click', function () { $('.active').removeClass('active').addClass('oldActive'); if ($('.oldActive').is(':last-child')) { $('.slide').first().addClass('active'); } else { $('.oldActive').next().addClass('active'); }; $('.oldActive').removeClass('oldActive'); $('.slide').fadeOut(speed); $('.active').fadeIn(speed); }); $('#prev').on('click', function () { $('.active').removeClass('active').addClass('oldActive'); if ($('.oldActive').is(':last-child')) { $('.slide').first().addClass('active'); } else { $('.oldActive').next().addClass('active'); }; $('.oldActive').removeClass('oldActive'); $('.slide').fadeOut(speed); $('.active').fadeIn(speed); });