: 데이터 속성에 액세스 할 수있는 이벤트를 바인딩 할 때

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'의 경고를 받아야합니다.

여러 가지 방법을 시도했습니다 ... 현재 코드는 '정의되지 않음'을 경고합니다.

질문

는 어떻게 데이터 바인딩 기능을 통해 속성을 통과합니까?

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