title: Typescript Uncaught TypeError: is not a function when calling function from jquery event handler
body: <p>New to typescript, trying to figure out why this doesn't work:</p>
  
  <p>I have the following class definition:</p>
  
  <pre><code>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}`);
      }
  }
  </code></pre>
  
  <p>The events are being fired correctly, but when they are fired, the browser complains that this.updateSliderText is not a function. Looking in the browser, this isn't being replaced by Typescript, and is instead referencing the JQuery object (primaryUi or secondaryUi). Yet IntelliSense correctly navigates to the proper updateSliderText function, which makes me believe that it should compile into javascript that correctly references that function.</p>
  
  <p>How do I reference a function belonging to the class in the jquery event handlers?</p>
  
  <p>Thank you.</p>