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;
    }

would you mind making a jsfilddle so we can better identify the problem with a working example? — Steve, Apr 13 '15 at 14:05
Have you tried adding some `console.log` in the click event to make sure it is not called the first time ? — Brewal, Apr 13 '15 at 14:05
Please turn that into a code snippet so those that want to help can evaluate and see the problem as it stands. — Brad Christie, Apr 13 '15 at 14:05
are you sure it is the event that is not firing or your conditional statement requirements that aren't being met? — Adjit, Apr 13 '15 at 14:06
I threw a `console.log` at the end of the .next conditional and it fires on the first click, the box only animates on the second click however — 10000RubyPools, Apr 13 '15 at 15:28

score 1 · Accepted Answer · answered Apr 13 '15 at 21:09

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;
    }


});

score 0 · Answer 2 · answered Dec 17 '17 at 05:22

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

jQuery not firing on first click

2 Answers2

Linked