Backbone view with template not firing events

I’m having some problems with my view handling it’s events. They simply don’t fire.
The view has it’s html from a template that looks like this:

<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>

So far so good.
The view code itself look’s like this:

  • Rails - How to add CSRF Protection to forms created in javascript?
  • How to model my data in angular js?
  • Are Backbone Models Singletons?
  • convert javascript object to model in backbone
  • After running the Require.js Optmizer, JQuery plugin can't be used
  • Are both the 'sync' event and Backbone.sync connected in some way — what is the difference between the two?
  •   /* ********* 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");
            }           
        });
    

    This is how I render the slide to the main app’s view:

    /* ********* 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;
        }   
    });
    

    The view is getting rendered to the screen perfectly, and it works just like it should.
    But the click event is not firing.

    When I inspect the slide view object, I can see that it do haves el object with the right HTML in it, including the button that has to fire a click event.

    And when I log the view’s events, I see that they are set:

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

  • How do I install/use the backbone.js framework?
  • UnderscoreJS Uncaught TypeError: Cannot call method 'replace' of undefined
  • Backbone.js events in jQuery
  • Setting dynamic css-style properties of a Backbone.View
  • using require and backbone to load templates via html file and not script tag
  • backSpace not firing the keyup event in android mobile
  • One Solution collect form web for “Backbone view with template not firing events”

    Try this pattern

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