jQuery not firing on first click

Question

I'm making a custom jQuery slider and for whatever reason, my jQuery function is not firing on the first click, only subsequent clicks.

I've searched stackoverflow for solutions, but none of them seem to match my issue. Here is my code:

  var theTestimonial = jQuery('.testimonial-wrapper');
    var theWidth = theTestimonial.width();
    var widthCount = theWidth;

    jQuery('.testimonial-container').wrap('<div class="extra-wrapper"></div>');
    jQuery('.testimonial-container').css('margin-left', '0px');

    jQuery('.extra-wrapper').css({
        width: function() {
        return theWidth;
      }, 
        position: 'relative',
        overflow: 'hidden'      
    });

    //get total of image sizes and set as width for ul 
    var totalWidth = theTestimonial.length * theWidth;
    jQuery('.testimonial-container').css({
        width: function(){
            return totalWidth;
        }               
    });


    jQuery('.next').on("click", function () {
        if (widthCount < totalWidth) {
            widthCount = widthCount + 995;

            jQuery('.testimonial-container').animate({
                "margin-left": theWidth = theWidth - 996
            }, 750);    
        } 
    });

    jQuery('.prev').on("click", function () {
        if (widthCount >= totalWidth && widthCount > 0) {
            jQuery('.testimonial-container').animate({
                "margin-left": theWidth = theWidth + 996
            }, 750);    
            widthCount = widthCount - 996;
        } 
    });

HMTL:

        <div class="testimonial-outer">
            <span class="prev"><</span>
            <span class="next">></span>

        <div class="wrapper testimonial-container">
            <?php if( have_rows('testimonials') ) : ?>
            <?php while( have_rows('testimonials') ) : the_row(); ?>
            <div class="testimonial-wrapper">
                <div class="section-title">
                    <h3><?php echo the_sub_field('section_title',$postID);?></h3>
                </div>
                <div class="testimonial">
                    <div class="testimonial-left">
                        <img src="<?php the_sub_field('testimonial_image',$postID);?>" alt="">
                    </div>
                    <div class="testimonial-right">
                        <div class="testimonial-right-inner">
                            <?php the_sub_field('testimonial_copy',$postID);?>
                            <span><?php the_sub_field('testimonial_by',$postID);?></span>
                        </div>
                    </div>
                </div>
            </div>
            <?php endwhile; ?>
            <?php endif; ?>
            <div class="clear"></div>
        </div>
    </div>

CSS

.testimonial-outer {
        float: left;
        width: 100%;
        background: #fbb52e;
        padding: 40px 0 74px;
    }

    .testimonial-outer .section-title h3 {
        color: #fff;
    }

    .wrapper {
        width: 996px;
        margin: 0 auto;
    }

    .testimonial-outer .testimonial {
        float: left;
        width: 100%;
        padding: 37px 0 0;
    }

    .testimonial-left {
        float: left;
        width: 32.3%;
    }

    .testimonial-left img {
        max-width: 100%;
    }

    .testimonial-right {
        float: right;
        width: 65%;
        padding: 50px 0 0 70px;
        background: url(images/quote-start.png) no-repeat left top;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 43px 0 0;
    }

    .testimonial-right-inner {
        float: right;
        width: 100%;
        background: url(images/quote-end.png) no-repeat right 90%;
        padding: 0 70px 0 0;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .testimonial-right p {
        margin: 0 0 11px 0;
        color: #555555;
        font-family: Calibri;
        font-size: 15px;
        line-height: 20px;
    }

    .testimonial-right span {
        float: right;
        color: #555555;
        font-family: Calibri;
        font-size: 20px;
        line-height: 24px;
        font-weight: bold;
    }

    .clear {
        clear: both;
    }

    .testimonial-container {
        margin-left: 0px;
    }

    .testimonial-wrapper {
        float: left;
        width: 996px;
    }

    .extra-wrapper {
        margin: 0 auto;
    }

    .testimonial-outer {
        position: relative;
    }

    .next {
        color: white;
        z-index: 5;
        position: absolute;
        right: 2%;
        top: 34%;
        font-size: 78px;
        cursor: pointer;
        background: rgba(30, 30, 30, .5);
        width: 50px;
        height: 50px;
        display: inline-block;
        line-height: 45px;
        padding: 15px;
        text-align: center;
        border-radius: 100%;
        border: 3px solid #c48100;
        -webkit-transition: all .25s ease-in-out;
        -moz-transition: all .25s ease-in-out;
        -ms-transition: all .25s ease-in-out;
        -o-transition: all .25s ease-in-out;
        transition: all .25s ease-in-out;
    }

    .next:hover {
        color: #fbb52e;
        background: white;
        border: 3px solid white;
    }

    .prev {
        color: white;
        z-index: 5;
        position: absolute;
        left: 2%;
        top: 34%;
        font-size: 78px;
        cursor: pointer;
        background: rgba(30, 30, 30, .5);
        width: 50px;
        height: 50px;
        display: inline-block;
        line-height: 45px;
        padding: 15px;
        text-align: center;
        border-radius: 100%;
        border: 3px solid #c48100;
        -webkit-transition: all .25s ease-in-out;
        -moz-transition: all .25s ease-in-out;
        -ms-transition: all .25s ease-in-out;
        -o-transition: all .25s ease-in-out;
        transition: all .25s ease-in-out;
    }

    .prev:hover {
        color: #fbb52e;
        background: white;
        border: 3px solid white;
    }

Answer 1

FYI I had just the same problem, an event fired on second click. The cause turned out to be simple, I accidentally swapped actions:

$('.element').click(function{
  $(this).toggleClass('iWantAction');
  if($(this).hasClass('iWantAction')){
    sitStill(); //WRONG! Had to be doAction1();
  } else {
    doAction(); //WRONG! Had to be sitStill();
  }
})

So, the outcome was the same, the event didn't fire until class was added on first click and then removed on second

Answer 2

I made a few changes to the javascript, I think the first click issue was that on the animate section, it was animating before calculating the new margin. I also updated some values to theWidth variable for consistency.

Also the if statement on the .prev click was stopping the slider getting back as widthCount doesn't get above totalWidth.

https://jsfiddle.net/xyvzdenj/

var theTestimonial = jQuery('.testimonial-wrapper');
var theWidth = theTestimonial.width();
var widthCount = theWidth;

jQuery('.testimonial-container').wrap('<div class="extra-wrapper"></div>');
jQuery('.testimonial-container').css('margin-left', '0px');

jQuery('.extra-wrapper').css({
    width: function () {
        return theWidth;
    },
    position: 'relative',
    overflow: 'hidden'
});

//get total of image sizes and set as width for ul 
var totalWidth = theTestimonial.length * theWidth;
jQuery('.testimonial-container').css({
    width: function () {
        return totalWidth;
    }
});


jQuery('.next').on("click", function () {
    if (widthCount < totalWidth) {
        widthCount = widthCount + theWidth;

        jQuery('.testimonial-container').animate({
            "margin-left": "-=" + theWidth
        }, 750);
    }


});

jQuery('.prev').on("click", function () {
    if (widthCount > theWidth) {
        jQuery('.testimonial-container').animate({
            "margin-left": "+=" + theWidth
        }, 750);
        widthCount = widthCount - theWidth;
    }


});