Flat-UI, Bootstrap-Select and MeteorJS EventHandlers

Question

I am using Flat-UI (http://designmodo.github.io/Flat-UI/) to aid with the front-end elements of a small MeteorJS App I am building.

The problem I am having is that I can't capture events when a select box is clicked.

Template.selector.rendered = function() {
  Deps.autorun(function(){
    $('.selectpicker').selectpicker({
      style: 'btn-info col-md-4',
      menuStyle: 'dropdown-inverse'
    });
  });
};

Template.selector.events({
  'click .dropdown-menu ul li': function(evt){
    var value = $(evt.target).val();
    var oldVal = Session.get('currentIndustry');

    console.log(evt);

    console.log(value);

    if(value != oldVal) {
      alert("CALLING ALL DA THANGS!");
    }

    Session.set("currentIndustry", value);
  }
})

In my events object, nothing happens.

Answer 1

Looks like your css selector is wrong. Based off the source from Flat-UI, try this:

Template.selector.events({
  'click ul.dropdown-menu li': function(evt){
    //...
  }
})

Your selector is looking for an "ul" under an element that had class ".dropdown-menu".