Javascript 模板未触发事件的主干视图

我的视图在处理它的事件时遇到了一些问题。他们根本不开火。 该视图的html来自一个如下所示的模板：

<script type="text/template" id="intro-slide-template">
  <div class="slide intro" id="intro-slide">
    <a href="#" class="startpresentation" id="start-btn">
      <%= startpresentation %>
    </a>
  </div>
</script>

  /* ********* Slide View  *********  */
    window.IntroSlideView = Backbone.View.extend({           
        initialize: function(){             
            this.template = _.template($("#intro-slide-template").html());          
        },  
        render: function(){     
            $(this.el).html(this.template(this.model.toJSON()));             
        },
        events: {
            "click #start-btn": "clickHandler"
        },
        clickHandler: function() {
            console.log("IntroSlideView     ::      clickHandler");
        }           
    });

以下是我将幻灯片呈现到主应用程序视图的方式：

/* ********* App View  *********  */
window.AppView = Backbone.View.extend({
    el: $("#content"),
    initialize: function(){
        _.bindAll(this, 'render');      

        //render 
        this.render();
    },
    render: function(){                     
        this.el.innerHTML = "";     
        var slide = this.model.get("currentSlide");
        slide.render();             
        this.el.innerHTML = slide.el.innerHTML;
    }   
});

视图被完美地渲染到屏幕上，它的工作原理与它应该的一样。 但是click事件没有触发

当我检查幻灯片视图对象时，我可以看到它确实有一个包含正确HTML的el对象，包括必须触发单击事件的按钮

当我记录视图的事件时，我看到它们已设置：

Object
click #start-btn: "clickHandler"
__proto__: Object

试一试

---

我认为您正在将innerHTML从幻灯片视图复制到应用程序视图，而不是事件处理程序。您使用jQuery吗？我已经设置了元素，现在它触发了事件。但是我对这个模型有两个视图，现在我在按下一次按钮的同时启动了两次。如何禁用具有相同事件侦听器的其他视图？不确定原因，但请单击slide.undelegateEvents（）；在主应用程序视图中，你知道为什么会这样吗？也许你在同一个el上加载了两次IntroSlideView？我在同一个el上加载了两个不同的SlideView实例。他们不应该只听自己的#开始btn点击吗？事件被委托给视图根el，因此如果两个视图使用相同的el，它们都将绑定该事件处理程序。

window.AppView = Backbone.View.extend({
  render: function() {
    this.slide = new window.IntroSlideView({ el: this.$(".slide") });

    // ...
  }
});