Where am I going wrong with this JQuery event?


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:


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


'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

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

        step: function(now, mx) {
            //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(){
            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.


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!