javascript - Varför ser inte jQuery händelser i min TS-konstruktörsklass

Jag har ett TS-script, detta är en kombinatorik för mitt studietema.

Jag inkluderar jQuery för att förenkla hanteringen av DOM-händelser.

I npm installerade jag alla beroenden, byggnaden är okej - inga fel.

main.ts

import * as $ from 'jquery';
import {Totalizator} from "./totalizator/totalizator";


$(() => {
    new Totalizator($('#totalizator'), 42, 5);
});

totalisator.ts

import * as $ from 'jquery';

const classes = {
    number: 'number'
};

const selectors = {
    number: `.${classes.number}`,
    numbersTable: '#totalizatorNumbersTable',
    chosenNumbersTable: '#totalizatorChosenNumbersTable'
};

export class Totalizator {
    private $container: JQuery;

    private readonly numbers: number;
    private readonly choices: number;

    constructor($container: JQuery, numbers: number, choices: number) {
        this.$container = $container;
        this.numbers = numbers;
        this.choices = choices;

        this.printNumbersTable();
        this.printChosenNumbersTable();

        // this is working, I can see on console, there is a jQuery object
        console.log(this.$container);

        // but this is not working
        $(this.$container).on(`${selectors.numbersTable} ${classes.number}`, 'click', (event) => {
            console.log(event);
        });
    }
}

När jag klickar på "numret" borde ett evenemang utlösas, varför gör det inte det?

Observera: totalizator.ts är förenklad. Jag inkluderar endast konstruktorn, resten av koden är inte viktig, bara HTML-utskrift.

Grundläggande jQuery kommer att se ut så här, men i min TS fungerar det inte, vad jag än skriver:

$('#totalizator').on('#totalizatorNumbersTable .number', 'click', (event) => {
    console.log(event);
});

Svar #1

Du använder classes.number i din mallsträngsinterpolering, vars värde är "number", medan du istället borde ha använt din variabel selectors.number, som lägger till punkten (.) för att konvertera det till en CSS-klassselektor (.$ {classes.number})

Nästa, syntaxen för jQuery .on-metoden är .on( events [, selector ] [, data ], handler ), det vill säga händelsenamnet först, och selektorn (för händelsedelegering) därefter.

Därför bör du i ditt fall ha:

$(this.$container).on('click', `${selectors.numbersTable} ${selectors.number}`, (event) => {
  console.log(event);
});

// Equivalent to:
$('#totalizator').on('click', '#totalizatorNumbersTable .number', (event) => {
    console.log(event);
});