объект литерала: не может получить доступ к атрибуту данных при связывании события

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