title: Uncaught TypeError: this.text is not a function within on method but not outside it
body: <p>I have a function that creates a div with two buttons and returns the ids of the wrapper and the buttons. When I use .text() to find the text of the button it works fine, but when i use .text() within the on method it gives me a TypeError.</p>
  
  <pre><code>         function generateTwoBtns(answerSpace, btnOneName, btnTwoName) {
                  const btnHTML =
                      `
                          &lt;div id="twoBtnWrapper"&gt;
                              &lt;button id="btnOne"&gt;${btnOneName}&lt;/button&gt;
                              &lt;button id="btnTwo"&gt;${btnTwoName}&lt;/button&gt;
                          &lt;/div&gt;
                      `
  
                  $(answerSpace).html(btnHTML)
  
                  return {
                      wrapper: '#twoBtnWrapper',
                      btnOne: '#btnOne',
                      btnTwo: '#btnTwo'
                  }
           }
  
          //Works
          console.log($(buttons.btnOne).text())
  
          //Doesn't work
          $(buttons.btnOne).on('click', function() {
                  console.log(this.text())
              })
  </code></pre>
  
  <p>I've looked at the answer found here: <a href="https://stackoverflow.com/questions/40486107/uncaught-typeerror-this-text-is-not-a-function">Uncaught TypeError: $this.text is not a function</a>. This is the same sort of problem I'm having. but in my code i can't see why this.text() works fine outside the on method, but doesn't work within it. </p>