TypeScript jQuery on click event type

Question

I have some code in an angular typescript file:

$('.dashboard-table').on('click', 'tbody tr', 
      function(event: JQueryEventObject) {   // changing this to any removes TS error
          const test: Test = <Test>$('.dashboard-table').DataTable().row(this).data();
          self.openTest(test.id, event);
      }
);

openTest(id: number, $event: MouseEvent|JQueryEventObject) {
    let target = $event.srcElement || $event.target as HTMLElement;
    if (target.tagName.toLowerCase() == 'a'
        || $(target).parents('a').length
        || target.tagName.toLowerCase() == 'button'
        || $(target).parents('button').length) {
        return;
    }
    this.router.navigate([this.urls.paths.test(id)]);
}

It's throwing a TypeScript error:

error TS2345: Argument of type '"click"' is not assignable to parameter of type 
'PlainObject<false | EventHandler<HTMLElement, 
(this: HTMLElement, event: JQueryEventObject) => vo...'.`.

How do I get ng serve to not truncate the TypeScript error message? How do I re-write it to not fail typescript checking?

I concur. You shouldn't have to use jQuery click events in an Angular setting, unless there's some jQuery-specific functionality you need to use for legacy reasons? — kingdaro
– kingdaro, Commented May 11, 2018 at 23:51
@kingdaro We're dynamically generating a Datatables.net DataTable - how do I use Angular to have an on click event in that case? — Denise Mauldin
– Denise Mauldin, Commented May 14, 2018 at 17:34

Sean · Accepted Answer · 2018-06-11 22:01:12Z

21

JQuery's on() method passes an object of type JQuery.Event to the handler, which you can read more about here: https://api.jquery.com/category/events/event-object/.

Example: $(document).on('click', (event: JQuery.Event) => { console.log(event); });

answered Jun 11, 2018 at 22:01

Sean

3082 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

TypeScript jQuery on click event type

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related