javascript - 对象文字模式: can't access a data attribute when binding events

Question

背景:

我正在尝试使用对象字面量模式来干燥我的代码。

对象:

这是我的对象:

(function(){
    var bookingForm = {
        init: function(){
            this.cacheDOM();
            this.bindEvents();
        },
        cacheDOM: function(){
            this.$nextStep = $('.btn-next-step');
        },
        bindEvents: function(){
            this.$nextStep.on('click', this.nextStep.bind(this));
        },
        nextStep: function(value){
            alert($(value).attr('data'));
        },
        prevStep: function(){

        },
    }
    bookingForm.init();
})();

我的按钮应该触发 nextStep 功能

<button class="btn btn-success btn-next-step" data="2">
    Next Step
    <i class="fa fa-arrow-right"></i>
</button>

所以我尝试访问按钮的数据属性，因此当我单击它时，我应该收到“2”警报。

我尝试了多种方法...当前代码只是警告“未定义”。

问题

如何将我的数据属性传递给绑定(bind)函数？

Answer 1

事件监听器的参数是事件，而不是元素。要获取元素，请使用 event.target

    nextStep: function(event){
        alert($(event.target).attr('data'));

jQuery 通常将 this 绑定(bind)到目标元素，但您已使用 this.nextStep.bind(this) 覆盖了它，因此 this > 包含 bookingForm 对象。