Can't use $('.foo').on('click', '.bar', with jQuery and TypeScript

Question

I am using TypeScript and jQuery in a project and I need to use jQuery's on to listen to an event:

const $previewListWrp: jQuery<HTMLElement> = $('.js-preview-list-wrp').first();

$previewListWrp.on('click', '.btn-action.remove', (evt: Event): void => {
  let $box: JQuery<HTMLElement> = $(evt.target).closest('.js-preview-wrp');
  console.log($box.data());
});

However, I get the error

Argument of type '"click"' is not assignable to parameter of type 'PlainObject void> | EventHandlerBase

Just started a new project and installed the latest versions of TypeScript, jQuery and @types/jQuery.

Answer 1

try changing evt: EventTarget to evt: JQuery.Event

Answer 2

You could use the alternative signature of the on method, in which the first argument is indeed an object, and do:

$previewListWrp.on({
    'click': (evt: EventTarget): void => {
        console.log(evt);
    }
}, '.btn-action.remove');