Uncaught TypeError: this.text не является функцией внутри метода, но не вне его

Question

У меня есть функция, которая создает div с двумя кнопками и возвращает идентификаторы оболочки и кнопок. Когда я использую .text () для поиска текста кнопки, он работает нормально, но когда я использую .text () в методе on, он дает мне TypeError.

         function generateTwoBtns(answerSpace, btnOneName, btnTwoName) {
                const btnHTML =
                    `
                        <div id="twoBtnWrapper">
                            <button id="btnOne">${btnOneName}</button>
                            <button id="btnTwo">${btnTwoName}</button>
                        </div>
                    `

                $(answerSpace).html(btnHTML)

                return {
                    wrapper: '#twoBtnWrapper',
                    btnOne: '#btnOne',
                    btnTwo: '#btnTwo'
                }
         }

        //Works
        console.log($(buttons.btnOne).text())

        //Doesn't work
        $(buttons.btnOne).on('click', function() {
                console.log(this.text())
            })

Я посмотрел на ответ, найденный здесь: Uncaught TypeError: $ this. текст не является функцией. Это та же проблема, что и у меня. но в моем коде я не понимаю, почему this.text () отлично работает вне метода on, но не работает в нем.

javascript

1

SJC 12 Мар 2018 в 23:56

Answer 1

.text() - это метод jQuery, предназначенный для использования с объектами jQuery. В вашем обработчике событий this относится к стандартному элементу DOM, у которого нет метода text, следовательно, ваша ошибка (.text не является функцией, которую имеет элемент DOM).

Здесь работает:

console.log($(buttons.btnOne).text())

Потому что вы обертываете элементы DOM, которые соответствуют селектору buttons.btnOne в объекте jQuery, а затем вызываете для этого .text().

Измените код на:

$(this).text()

Таким образом, элемент «кнопка» DOM, который был нажат, обернут в объект jQuery, и тогда он будет работать.

2

Scott Marcus 12 Мар 2018 в 21:01

Answer 2

Это потому, что this фактически относится к элементу DOM, а элемент DOM не имеет метода .text(). Вы хотите использовать его в объекте jQuery, например: $(this) вместо этого:

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

В официальной документации jQuery они описывают, что на самом деле означает this в контексте обратный вызов (выделено мной):

Когда jQuery вызывает обработчик, ключевое слово this является ссылкой на элемент, в который доставляется событие; для непосредственно связанных событий это элемент, к которому событие было прикреплено, а для делегированных событий это селектор соответствия элемента. (Обратите внимание, что это может быть не равно event.target, если событие возникло из дочернего элемента.) Чтобы создать объект jQuery из элемента, чтобы его можно было использовать с методами jQuery, используйте {{X2 }} .

1

Terry 12 Мар 2018 в 20:58

Uncaught TypeError: this.text не является функцией внутри метода, но не вне его

2 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

javascript