CODEWITHSUNDEEP
jqueryeventsmeteor
Will Parker
Will Parker

Reputation: 496

Dynamic class for Meteor Event Map

I am trying to create a wizard package and can't seem to be able to setup a click event on an element.

I want the person using the package to be able to define their next and previous buttons class values and then apply an event when an element with those classes are clicked.

It works fine when I use static class values but if I try to use the ones I define when I initialize the wizard it fails with an unexpected token value. I have tried printing the classes to the console within the events function and they are printing out fine.

This works fine but uses a static class name

Template.wizard.events({
  "click .btn-prev": function (event) {
    event.preventDefault();
    this.wizard.previous();
  }
});

This won't work with unexpected token + error

Template.wizard.events({
  "click ." + this.wizard.prevClass: function (event) {
    event.preventDefault();
    this.wizard.prev();
  }
});

I then tried to get around it by doing something like this but my if statement always seems to return false.

Template.wizard.events({
  'click': function (event) {
    event.preventDefault();
    if ($(this).hasClass(this.wizard.nextClass)){
      this.wizard.next();
    }
  }
});

Upvotes: 0

Views: 348

Answers (1)

fabien
fabien

Reputation: 2258

What is supposed to be your $(this)? You are in the callback of a click :)

If you want to find something after a click, you should try with the event current target (not the target, they could be different), or the second argument of the click (the template) :

Template.wizard.events({
    'click': function (e, tmpl) {
        event.preventDefault();

        console.log(e.currentTarget);
        console.log(tmpl);
        console.log(tmpl.find(this.wizard.nextClass);

        if( e.currentTarget.className === this.wizard.nextClass )
            this.wizard.next();

    }
});

Upvotes: 1

Related Questions