Where am I going wrong with this JQuery event?


#1

I’m trying to get a form that is split up into a few fieldsets to display appropriately when “next” button is clicked. Here’s the code:

HTML:

And the JS:

  var current_fs, next_fs, previous_fs; //fieldsets
 var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches

Template.sell.events({

'click .next' : function(){

    if(animating) return false;
    animating = true;

    current_fs = $(this).parent();
    next_fs = $(this).parent().next();


    //activate next step on progressbar using the index of next_fs
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");


    //show the next fieldset
    next_fs.show();

    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {

        step: function(now, mx) {
            console.log('suh');
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale current_fs down to 80%
            scale = 1 - (1 - now) * 0.2;
            //2. bring next_fs from the right(50%)
            left = (now * 50)+"%";
            //3. increase opacity of next_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({'transform': 'scale('+scale+')'});
            next_fs.css({'left': left, 'opacity': opacity});
        },
        duration: 800,
        complete: function(){
            current_fs.hide();
            animating = false;

        },
        //this comes from the custom easing plugin
        easing: 'easeInOutBack'

    });

}
});

In the console, calling the equivalent of next_fs.show() works, and brings up the next fieldset. However this isn’t getting executed by the JQuery in the template event.

I know that Meteor can be a bit tricky with JQuery but is there anything obviously wrong with what I’m doing here? Is it a matter of the rest of the fieldsets not being rendered possibly? Any help would be greatly appreciated here.

EDIT:

I’m dumb, figured this out (leaving this up in the odd chance someone has the same problem + I’m not sure how to delete a thread). The template event wasn’t getting the appropriate $(this) from the ‘click .next’ event, so I threw that in as well and now it’s working as intended!