Adding new Item to collection on 'add' triggers only once

Question

I am pretty new to backbone,so probably it is stupid bug. When I press send button(#send_email_button) , one email is rendered as it should,

but when i press it again, no more emails added. the only logs i got is:(after second+ push) :

console.log('adding to collection');
console.log('about to exit');

in other words it does not even enters add handler in collection. Can someone explain why and how to fix this?

Many thanks! EDIT: If i delete 1 email that rendered , and press send again, new email added correctly.

Here relevant code:

$(document).ready(function() {
    //email model
    var EmailModel = Backbone.Model.extend({

        defaults: {
            id: '',
            email_from: '',
            email_recipient: '',
            email_subject: '',
            email_data: '',
            is_email_read: '',
            email_date: ''
        }


    });

    //email collection
    var email_collection = Backbone.Collection.extend({
        model: EmailModel,
        url: '/fetch_received_emails'
    });

    var email_collection = new email_collection();

    var EmailView = Backbone.View.extend({
        model: new EmailModel(),
        tagName:'li',
         events: {

             "click #email_template_view" : "click_email"
         },

        initialize: function() {
            console.log('initializing email view');
            this.template = _.template($('#email_template').html());
            console.log('finish initializing email view');
        },

        render: function() {

            this.$el.html(this.template(this.model.toJSON()));

            return this;
        },

         click_email: function() {
             this.model.is_email_read = true;
             $('#toggle_part_email').toggleClass('no_display');
         },

    });

    var CollectionView = Backbone.View.extend({
        model: email_collection,
        el: $('#emails_class'),
        initialize: function() {
            console.log('init to collection view');
            this.model.fetch();
            this.render();
            this.model.on('change', this.render, this);
            this.model.on('add', this.render, this);
            this.model.on('remove', this.render, this);

        },

        render: function(){
            console.log('rendering collection');
            var that = this,
                i;

            that.$el.html('');

            emails = this.model.toArray();

            for (i in emails){
                console.log(' printing emails');
                console.log(emails[i]);

                var new_email_view = new EmailView( {model : emails[i]});

                that.$el.append(new_email_view.render().$el);
            }
            console.log('about to exit collection view');
            return this;
        }
    });






    $('#send_email_button').click(function(event){

        // event.preventDefault();
        var sending_date= new Date();
        sending_date = sending_date.toDateString()

        //new email to ajax

        console.log('adding to collection');
        email_collection.add(new EmailModel({
                'email_from':$('#email_from').val(),
                'email_recipient' :$('#email_recipient').val(),
                'email_subject': $('#email_subject').val(),
                'email_data':$('#email_data').val(), 
                'is_email_read':false,
                'email_date': sending_date 
            }));
        console.log('about to exit');
        return false;
    });
    //create singelton for the collection view

   var c = new CollectionView();
});

Answer 1

Why don't you try to use the click event as the other one? Inside the collectionView use events again.

events: {

             "click #send_email_button" : "AnyNameThatYouWant"
         },

AnyNameThatYouWant: function() {
            //Do all the things
         },

Try this.