Question

我有一个函数，它创建一个带有两个按钮的div，并返回包装器和按钮的ID。当我使用.text（）来查找按钮的文本时，它工作正常，但是当我在on方法中使用.text（）时，它会给我一个TypeError。

let observable = Variable<[Int]>([])
observable.value.append(1)

我看过这里找到的答案：Uncaught TypeError: $this.text is not a function。这是我遇到的同样问题。但在我的代码中，我无法理解为什么this.text（）在on方法之外工作正常，但在其中不起作用。

Answer 1

这是因为this实际上引用了DOM元素，而DOM元素没有.text()方法。你想要的是在jQuery对象上使用它，即：$(this)代替：

$(buttons.btnOne).on('click', function() {
    console.log($(this).text())
});

从official jQuery documentation开始，他们描述了this在回调的背景下实际代表的含义（强调我自己）：

当jQuery调用处理程序时，this关键字是对传递事件的元素的引用;对于直接绑定事件，这是附加事件的元素，对于委托事件，这是一个元素匹配选择器。（请注意，如果事件来自后代元素，则这可能不等于event.target。）要从元素创建jQuery对象以便可以与jQuery方法一起使用，请使用{{1 }}

Answer 2

$( this )是一个jQuery方法，用于jQuery对象。在您的事件处理程序中，.text()引用了一个没有this方法的标准DOM元素，因此您的错误（text不是DOM元素所具有的函数）。

它在这里工作：

.text

因为您正在包装与jQuery对象中的console.log($(buttons.btnOne).text())选择器匹配的DOM元素，然后在其上调用buttons.btnOne。

将代码更改为：

.text()

这样点击的DOM“button”元素就会被包装在一个jQuery对象中，然后就可以了。

未捕获的TypeError：this.text不是on方法中的函数，但不在其外部

2 个答案: