gistfile1.js

/**
 * Dropdown
 */
$(document)
	.on('click', '.dropdown p, .dropdown .btn', function (event) {
		$(event.target)
			.closest('.btn')
				.attr('tabindex', '1') // Gives the element a tabindex so it can be focused and blurred afterwards.
				.trigger('focus')
			.next().toggle();
	})
	.on('blur', '.dropdown p, .dropdown .btn', function (event) {
		/*jshint immed:false */
		(function () {
			$(event.target)
				.closest('.btn')
					.removeAttr('tabindex')
				.next().hide();
		}).delay(100);
	});

// Somewhere else. this.sortFriends is not always being called.
$(document).on('click', '#sort-friends .option', this.sortFriends.bind(this));

gistfile2.handlebars

<div id="sort-friends" class="dropdown">
  <a class="btn">Order by: {{selectedOption}}</a>
	<ul>
		{{#each options}}
		<li><a class="option" href="#" data-param="{{uid}}">{{name}}</a></li>
		{{/each}}
	</ul>
</div>