title: Proper binding of $(this) when extracting named function in .on() callback
body: <p>I have a snippet of code like this and everything works great:</p>
  <pre><code>jQuery(document).ready(function ($) {
      $(document)
          .on('click', '[selector]', function(e) {
              const paramAttr = $(this).attr('data-set-param')
              $(this).addClass('some-class').attr('checked', true)
              ...
          })
  })
  </code></pre>
  <p>I want to add another event handler but reuse the initial callback so I start by extracting it out to a function like so:</p>
  <pre><code>jQuery(document).ready(function ($) {
      $(document)
          .on('click', '[selector]', setClickHandler)
  
      function setClickHandler(event) {
          const paramAttr = $(this).attr('data-set-param')
          $(this).addClass('some-class').attr('checked', true)
          ...
      }
  })
  </code></pre>
  <p>I tested the above and everything still works. Now, I add another event handler:</p>
  <pre><code>jQuery(document).ready(function ($) {
      $(document)
          .on('click', '[selector]', setClickHandler)
          .on('keypress', '[selector]', function(e) {
              if (e.keyCode === 13) {
                  setClickHandler(e)
              }
          })
  
      function setClickHandler(event) {
          const paramAttr = $(this).attr('data-set-param')
          $(this).addClass('some-class').attr('checked', true)
          ...
      }
  })
  </code></pre>
  <p>At this point, when doing an enter key press, I get errors when accessing the contenst of the <code>$(this)</code> variable. How do I go about doing the proper binds or calls so that <code>$(this)</code> can be accessed properly in the function call?</p>