木偶不会在模态窗口中触发事件

Question

我有一个简单的ItemView，它使用自定义模态区域的技术在模态窗口内渲染。

我有几个模态区域在彼此之上，并且它似乎不会对其他视图（也是模态）的事件产生负面影响。

根本没有发生任何事件。我已经调试了Marionette源代码，看起来它正确地通过了delegateEvents方法，没有错误。

以下是观点：

"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);

        }

    });

});

我的模板非常冗长，但这里是相关部分（我查了一下，整个过程就是生产正确的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-->

其他观点以类似的方式使用，并且效果很好。

显示此模态的基础是使用区域，如下所示：

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

这里是参考区域。奇怪的是，这确实给出了任何错误或其他任何错误。

"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
            });
        }
    });
});

我知道这有点无聊，很难提供帮助，但我很感激。谢谢！