对象文字模式：绑定事件时无法访问数据属性

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”的警报。

我已经尝试了很多方法...当前代码只是提醒 'undefined'。

问题

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

Answer 1

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

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

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

Answer 2

我认为您的问题出在 bindEvents 中。您将同一个对象绑定到函数，但该函数希望接收一个元素。我提出下一个改变

(function(){
var bookingForm = {
    init: function(){
        this.cacheDOM();
        this.bindEvents();
    },
    cacheDOM: function(){
        this.$nextStep = $('.btn-next-step');
    },
    bindEvents: function(){
        var that = this;
        this.$nextStep.on('click', function (e) {
            that.nextStep(this)); // here "this" is the element
            // or you can do that.nextStep(e.target);
        });
    },
    nextStep: function(value){
        alert($(value).attr('data'));
    },
    prevStep: function(){

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

对象文字模式：绑定事件时无法访问数据属性

Object Literal Pattern: can't access a data attribute when binding events

javascript

jquery

data-binding

object-literal