EasyAutocomplete 이벤트 - $ (this)는 항상 정의되지 않음

Question

여러 요소에 대해 EasyAutocomplete을 동시에 사용하려고 시도했습니다. 이지만 $(this)은 항상 정의되지 않았습니다. 왜 그런가요?

$("#city_selector_suggest, $city_two, #city_down").easyAutocomplete({ 
    url: "/templates/rm/js/ecity2.json", 

    getValue: function(element) { 
     return element.cdek_cityname; 
    }, 

    list: { 
     onChooseEvent: function() { 
      var selectedItemValue = $(this).getSelectedItemData().cdek_id; 
      console.log(selectedItemValue); 
     }, 
     match: { 
      enabled: true, 

      method: function(element, phrase) { 
       if(element.indexOf(phrase) === 0) { 
        return true; 
       } else { 
        return false; 
       } 
      } 
     } 
    } 
}); 

Answer 1

빠른 테스트 EasyAutocomplete 이벤트 핸들러에서 this 즉 "jQuery를 그것을하지 싫어", unconventionally 사용되는 것을 보여줍니다. 내가 jQuery 플러그인에서 기대할 수있는 무엇

: 이벤트 핸들러 포인트 내부

• this를 DOM 요소
• 이벤트 핸들러는 적어도 하나의 event 인수 가능성이 추가 data 인수를 가져옵니다.

무엇 EasyAutocomplete가 수행합니다

• this 위젯의 구성 개체의 일종이다
• 구성 개체가 보이지 않는다 이벤트 핸들러

에 대한 인수가 없습니다 위젯을 기반으로하는 위젯 또는 DOM 요소를 가져 오는 방법을 제공하십시오.

.each()를 사용하여 현재의 구성 요소에 대한 참조를 저장하는 위젯을 개별적으로 결합하는 것이라고하는 용액에 가까운 것.

$("#city_selector_suggest, #city_two, #city_down").each(function() { 
    var $self = $(this); 

    $self.easyAutocomplete({ 
     url: "/templates/rm/js/ecity2.json", 
     getValue: function(element) { 
      return element.cdek_cityname; 
     }, 
     list: { 
      onChooseEvent: function() { 
       var selectedItemValue = $self.getSelectedItemData().cdek_id; 
       console.log(selectedItemValue); 
      }, 
      match: { 
       enabled: true, 
       method: function(element, phrase) { 
        return element.indexOf(phrase) === 0; 
       } 
      } 
     } 
    }); 
}); 

하지 중, 한 번만-하지만 완전히 끔찍한 .easyAutocomplete()를 호출하는 것과 매우 우아한.