缺少上下文 Javascript

Question

我有一个方法 _addEvents 使用 JQuery on. 函数为按钮设置点击事件。这也为 cartCollection.removeItem(buttonId); 提供了单击按钮的 id 问题是它不断丢失按钮的 id 值并给出 undefined

已编辑 _addEvents 必须从此模板中获取点击按钮的 ID：

<script type="text/template" id="cartTemplate">
<ul id = "cartList" >
    <% for(var i = 0; i < 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>

_addEvents的实现以及该方法所属的对象：

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();
    });
}

};

Answer 1

好的 - 你的 this 指的是回调上下文，你应该从事件对象中获取被点击的对象：

_addEvents: function () {
    'use strict';
    this._rootElement.on('click','.removeButton' , function ( e ) {
        var buttonId = $( e.currentTarget ).attr('id'); // GET TARGET FROM EVENT
        console.log('id:' + buttonId);
        cartCollection.removeItem(buttonId);
        cartList.render();
    });
}

缺少上下文 Javascript

Missing context Javascript

javascript

jquery

javascript-events