Машинопись Uncaught TypeError: это не функция при вызове функции из обработчика событий JQuery

Question

Новых в машинописи, пытаясь выяснить, почему это не работает:

У меня есть следующее определение класса:

class SliderRange { 

    updateSliderText(lowId: JQuery, highId: JQuery) { 
     //do some updates 
    } 

    constructor(public uiId: string, lowDisplay: JQuery, highDisplay: JQuery) { 
     //register the events that tie ui to the set methods here. 
     this.primaryUi().on("input", function() { 
      this.updateSliderText(lowDisplay, highDisplay); 
     }); 

     this.secondaryUi().on("input", function() { 
      this.updateSliderText(lowDisplay, highDisplay); 
     }); 
    } 

    private primaryUi() : JQuery { 
     return $(`.original#${this.uiId}`); 
    } 
    private secondaryUi(): JQuery { 
     return $(`.ghost#${this.uiId}`); 
    } 
} 

События запускаются правильно, но при их запуске браузер жалуется, что this.updateSliderText не является функцией. Если посмотреть в браузере, это не будет заменено на TypScript и вместо этого ссылается на объект JQuery (primaryUi или secondaryUi). Однако IntelliSense правильно переходит к правильной функции updateSliderText, что заставляет меня поверить, что она должна скомпилироваться в javascript, который правильно ссылается на эту функцию.

Как ссылаться на функцию, принадлежащую классу в обработчиках событий jquery?

спасибо.

Answer 1

Неправильный адрес this, в котором вы звоните this.updateSliderText.

Вам нужна функция стрелки (они были изобретены именно по этой причине) или сделать это старый стиль, путем связывания его:

this.primaryUi().on("input",() => { // Yay, cool arrow functions. 
    this.updateSliderText(lowDisplay, highDisplay); 
}); 

this.primaryUi().on("input", (function() { 
    this.updateSliderText(lowDisplay, highDisplay); 
}).bind(this)); // yay...? old-bind-style 

Прохладная и машинопись метод стрелка один.