Click event not working in backbone.js

Question

i am pretty new to backbone.js.

i have two templates which are rendered on same page.

On 1st template, click button is triggering. but 2nd template click event is not triggering

My code looks this.

app.js code like this

    var UserView = Backbone.Marionette.ItemView.extend({
      template: '#userView',
      tagName: 'li',
      className: 'listItem'
   });


    var UsersView = Backbone.Marionette.CollectionView.extend({
      childView: UserView,
      tagName: 'ul'
    });

   var FormView = Backbone.Marionette.ItemView.extend({
      template: '#formView , #userView ',

     events: {
        'click .submitbutton': 'createNewUser', // this event is triggered
        'click .remove':'removeUser' // this event is not trigerring
      },

      ui: {
        name: '#name',
        age: '#age'
     },

createNewUser: function(){
    //create new user
    this.collection.add({
        name: this.ui.name.val(),
        age: this.ui.age.val(),
    });
    this.ui.name.val('');
    this.ui.age.val('');
},

removeUser: function(){
    console.log('it clicks here');
}

});

    Lab.addRegions({
      form: '#form',
      list: '#list'
   });

  Lab.addInitializer(function(){
   Lab.users = new Users();
   Lab.form.show(new FormView({collection: Lab.users}));
   Lab.list.show(new UsersView({collection: Lab.users}));
   });

where my templates looks like this #userview template where event s not triggering

 <script id="userView" type="text/template">
     <p>Name: <%= name %></p>
     <p>Age: <%= age %></p>
     <button class="remove"> Delete </button> // i am trying to trigger this event in model
</script>

template where event is working #formview

 <script id="formView" type="text/template">

    <label for="name">Name:</label>
   <input type="text" id="name" />
   <label for="age">Age:</label>
   <input type="text" id="age" />
   <button class="submitbutton">Submit</button>
</script>

Przemysław Konieczniak Przemysław Konieczniak · Accepted Answer · 2017-05-01T23:43:24

Each view should have only one template. In your example you want for a formView set as a template property two templates, So second reference is ignored.

In this case you formView should be rather a layoutView with two regions In wich you will show views with own templates. Thanks to event bubling layoutView can react to children events. You can find more information in marionette docs

PS. I recomend use the newest version of a framework

Click event not working in backbone.js

1 Answers