我有一个TS脚本,这是一个组合数学为我的学习主题。
我使用jQuery来简化DOM事件处理。
在npm中,我安装了所有的依赖项,构建很好-没有错误。
main.ts
import * as $ from 'jquery';
import {Totalizator} from "./totalizator/totalizator";
$(() => {
new Totalizator($('#totalizator'), 42, 5);
});
totalizator.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);
});
}
}
当我点击“数字”时,应该有一个事件被激发,为什么没有呢?
注:totalizator.ts
是简化的。我只包含构造函数,其余的代码并不重要,只打印HTML。
基本的jQuery看起来是这样的,但是在我的TS中,无论我写什么,它都不工作:
$('#totalizator').on('#totalizatorNumbersTable .number', 'click', (event) => {
console.log(event);
});
1条答案
按热度按时间iq3niunx1#
您在模板字符串插值中使用了
classes.number
,其值为"number"
,而您本应使用变量selectors.number
,该变量添加了点(.
)以将其转换为CSS类选择器(.${classes.number}
)接下来,jQuery
.on
方法的语法是.on( events [, selector ] [, data ], handler )
,即首先是事件名称,然后是选择器(用于事件委托)。因此,在您的情况下,您应该: