Mousetrap - Adding Wrapping Specific Elements gives error a.attachEvent is not a function

Question

I am using a JS library - Mousetrap v1.6.1 for keyboard shortcuts.

I have 2 forms on my HTML page, billheaderfrmand billfooterfrm. I am using below code to bind to headerfrm

  var headerfrm = $('#billheaderfrm');
  Mousetrap(headerfrm).bind('ctrl+s', function(e, combo) {
    e.preventDefault();
    headerfrm.submit(function (event) {
      event.preventDefault();
      updatebillheader();
    });
    return false;
  });

I have added the above code in jquery $(document).ready(function() .

When the page loads, i get an error in console - TypeError: a.attachEvent is not a function

FYI: As per the documentation, binding to selected element is supported since version 1.5.

Answer 1

$('#billheaderfrm') is a jQuery object, and jQuery objects don't have attachEvent methods. Bind to a DOM element instead:

var headerfrm = document.getElementById('billheaderfrm');
Mousetrap(headerfrm).bind('ctrl+s', function(e, combo) { ...