Marionette not triggering events in modal window

Question

I have a simple ItemView that's being rendered inside a modal window, using the technique of a custom modal region.

I have several modal regions on top of each other, and it does not seem to affect negatively the events of other views (that are also modal).

No events at all are being fired. I already debugged Marionette sources, and it looks like it's passing through the delegateEvents method correctly, without errors.

Here's the view:

"use strict";
define(function(require){

    var Marionette = require("marionette");
    var BaseModalView = require("views/Base/BaseModal");
    var PointOfInterestModalTemplate = require("text!templates/PointOfInterest/PointOfInterestModal.html");
    var DistanceHelper = require("utils/DistanceHelper");

    return Marionette.ItemView.extend({
        template: PointOfInterestModalTemplate,
        events: {
            "click #route-button": "route",
            "click #like-button": "like",
            "click .report-button": "report"

        },
        route: function(event) {
            console.log("route");
            //var coordinates = this.model.attributes.geometry.coordinates;
            //var originalLatLng = L.latLng(coordinates[1], coordinates[0]);
            //vent.trigger("routing:routeTo", originalLatLng);
        },

        like: function(event) {
            console.log("like");
        },

        report: function(event) {
            console.log("report");
        },
        onRender: function() {

            var distanceHelper = new DistanceHelper();
            var distanceString = distanceHelper.verboseDistance(this.model.geometry._latlng);
            this.$("#distance-placeholder").html(distanceString);

        }

    });

});

My template is pretty lengthy, but here's the relevant part (I checked and the whole thing is production correct HTML)

<script type="text/template">
    <div id="poi-info-modal" class="modal fade" tabindex="-1" style="display: none">

        <div class="modal-header modal-header-blue">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                    aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Details</h4>
        </div>

        <div class="modal-body">

            <div class="container-fluid">

                <h2><%= name %></h2>

                <div class="row">
                    <div class="col-xs-12 col-md-12">
                        <p class="small">
                            <% if (address) { %>
                            <%= address %>
                            <% } else { %>
                            No address available
                            <% } %>
                        </p>

                        <p class="small">

                            <span id="distance-placeholder"></span>

                        </p>
                    </div>
                </div>

                <div class="row margin-top-row center-row">
                    <div class="col-xs-4 col-md-4">
                        <a href="javascript:void(0)" id="route-button" class="btn btn-circle btn-lg btn-blue">
                            <i class="fa fa-map-marker"></i>
                        </a>
                    </div>
                    <div class="col-xs-4 col-md-4">
                        <a id="like-button" class="btn btn-circle btn-blue btn-lg">
                            <i class="fa fa-heart"></i>
                        </a>
                    </div>
                    <div class="col-xs-4 col-md-4">
                        <a href="javascript:void(0)" class="report-button btn btn-circle btn-blue btn-lg">
                            <i class="fa fa-exclamation-triangle"></i>
                        </a>
                    </div>
                </div>

</div> <!--container-->
</div> <!--modalbody-->
</div> <!--modal-div-->

Other views are used in similar fashion, and work quite well.

the basics for displaying this modal is using a region, like this:

var region = new ModalRegion();
region.show(new ModalView({model: model});

Here's is the region for reference. The weird thing is that this does give any errors or whatsoever.

"use strict";
define(function(require){
    var $ = require("jquery");
    var bootstrap = require("bootstrap");
    var bootstrapModal = require("bootstrap-modal");
    var Marionette = require("marionette");

    return Marionette.Region.extend({
        el: "#modal-container",
        constructor: function(){
            Backbone.Marionette.Region.prototype.constructor.apply(this, arguments);
            this.on("show", this.showModal, this);
        },

        getEl: function(selector){
            var $el = $(selector);
            $el.on("hidden", this.close);
            return $el;
        },

        showModal: function(view){
            view.on("close", this.hideModal, this);

            var width = view.modalWidth || 700;
            var height = view.modalHeight || 600;
            var maxHeight = view.modalMaxHeight || 600;

            $(".modal").modal({
                show: true,
                width: width,
                height: height,
                maxHeight: maxHeight
            });
        },

        hideModal: function(){
            $(".modal").modal({
                show: false
            });
        }
    });
});

I know this kinda boring and hard to help, but I appreciated it. Thanks!