jquery - Missing context Javascript -

i have method _addevents sets click event buttons using jquery on. function. gives id of clicked button cartcollection.removeitem(buttonid); problem keeps loosing id value of button , gives undefined

edited _addevents must id of clicked button template:

<script type="text/template" id="carttemplate"> <ul id = "cartlist" >     <% for(var = 0; < data.items.length; i++){%>     <%if(data.items[i].quantity === 1){%>     <li><%=data.items[i].item.id%><br>         <%=data.items[i].item.name%><br>         price per phone:<%=data.items[i].item.price%><br>         <%=data.items[i].thisitemtotal %><br>         total quantity:<%=data.totalquantity%><br>         total price:<%=data.total%><br>         <button id="<%=data.items[i].item.id%>" type="button" class="removebutton btn btn-default" aria-label="center-align">             remove         </button>     </li>     <%} else {%>     <li><%=data.items[i].item.id%><br>         <%=data.items[i].item.name%><br>         quantity:<%=data.items[i].quantity%><br>         price per phone:<%=data.items[i].item.price%><br>         <%=data.items[i].thisitemtotal %><br>         total quantity:<%=data.totalquantity%><br>         total price:<%=data.total%><br>         <button id="<%=data.items[i].item.id%>" type="button" class="removebutton btn btn-default" aria-label="center-align">             remove         </button>     </li>     <%}%>     <%}%> </ul> 

realization of _addevents , object method belongs to:

var cartlist = { _itemscollections: cartcollection, _template: _.template($('#carttemplate').html()), _rootelement: $('#orderscartdiv'), //_rootelementul: $("#cartlist"), initialize: function () {     'use strict';     //this.divid = divid;     //this._rootelementul = $("#cartlist");     //this._itemscollections= cartcollection;     //bind(this._addevents(),cartlist);     this._addevents(); }, render: function () {     'use strict';     var data = {         items: this._itemscollections.getitems(),         total: this._itemscollections.gettotalprice(),         totalquantity: this._itemscollections.gettotalquantity()     };     var rendtemplate = this._template({data: data});     this._rootelement.html(rendtemplate);     this._addevents();     console.log(this._itemscollections); }, _addevents: function () {     'use strict';     var self = this;     this._rootelement.on('click','.removebutton' , function () {         var buttonid = $(self).attr('id'); // undefined         console.log('id:' + buttonid);         cartcollection.removeitem(buttonid);         cartlist.render();     }); } 

};

okay - this refers callback context, should clicked object event object:

_addevents: function () {     'use strict';     this._rootelement.on('click','.removebutton' , function ( e ) {         var buttonid = $( e.currenttarget ).attr('id'); // target event         console.log('id:' + buttonid);         cartcollection.removeitem(buttonid);         cartlist.render();     }); }