Jquery选择器返回未定义的

 <label for="search-term-id">

                <input type="text" class="search-term" placeholder="What are you looking for?"
                       id="search-term-id">

            </label>

这是我想要的类,当用户在输入中键入一些文本时,会显示一条警告消息:

import $ from 'jquery';


class Search {

    constructor() {

        console.log('Bundled!');
        this.openButton = $('.js-search-trigger');
        this.closeButton = $('.search-overlay__close');
        this.searchOverlay = $('.search-overlay');
        this.events();
        this.isOverlayOpen = false;
        this.searchField =$('#search-term-id');
    }


    events() {

        this.openButton.on('click', this.openOverlay.bind(this));
        this.closeButton.on('click', this.closeOverlay.bind(this));

        $(document).on('keydown', this.keyPressDispatcher.bind(this));
        this.searchField.on('keydown', this.typingLogic);
    }


    typingLogic () {
        alert('Hello from typingLogic');
    }

    keyPressDispatcher(e) {
        if(e.keyCode === 83 && !this.isOverlayOpen) {
            this.openOverlay();
        }


        if(e.keyCode === 27 && this.isOverlayOpen) {

            this.closeOverlay();
        }
    }

    openOverlay() {
                this.searchOverlay.addClass('search-overlay--active');
                /* When we are seeing the overlay: */
                $('body').addClass('body-no-scroll');
                console.log('opening');
                this.isOverlayOpen = true;
    }
    closeOverlay() {   
            this.searchOverlay.removeClass('search-overlay--active');
            $('body').removeClass('body-no-scroll');
        this.isOverlayOpen = false;
        console.log('closing');
    }
}

export default Search;

但现在浏览器给了我一个错误,说: Uncaught TypeError:无法读取上未定义的属性“on”: 行是:

this.searchField.on('keydown', this.typingLogic);