Question

i have a backbone view like this:

var newrow=Backbone.View.extend({

        el:"<table>",
        events:{
            'click .edit':'editrow',
            'click .delete':'deleterow'
            },


            render: function()
            {
                data=this.model.toJSON();
                $('table').dataTable().fnAddData([data.name,data.email,data.contact_number,'<span class="edit">Edit</span><span class="delete">Delete</span>']);
                return this;
            },

            editrow:function(){
                alert ("edit);
            },

            deleterow:function(){
            alert("delete");
            }
        })

I need to attach click events with td having spans with class ‘edit’. I know this will not work because i am adding rows dynamically using datatable function. I am trying to add rows in a pre-rendered datatable. What may be the solution.

P.S I have already rendered a empty table in some other view. This works fine and datatable gets rows added. But can’t figure out how to add click events in elements.

Answer 1

Few things are a bit off in your view. If you fix those, it might work.

• Instead of el:"<table>" try tagName:"table". This is the correct way to set up a new element for a view.

• Instead of $('table').dataTable(). try this.$el.dataTable(). The former performs a selection for all table elements in you page, and the latter references your view´s (<table>) element.

As long as the elements you add are within the view’s el the events should wire up automatically. If it doesn’t work for some reason, try calling this.delegateEvents() after inserting new rows.