Событие щелчка приводит к ошибке `TypeError: this.$ VarName.on это не функция`, которая не является функцией

Question

У меня есть этот точный код:

<span class="btn" id="setScheduleBtn">Set Schedule</span>
    <div id="reportSchedule" name="reportSchedule" style="display: none;">text</div>


<script type="text/javascript">
/******************/
/** Set Schedule **/ 
/******************/
(function() {

    var schedule = {

        report: [], 
        template: $('#report_schedule').html(),

        // Init functions
        init: function() {
            this.cacheDom();
            this.bindEvents();
        }, 
        // Cache elements from DOM
        cacheDom: function() {
            this.$setScheduleBtn = $('#setScheduleBtn'); 
            this.$reportSchedule = $('#reportSchedule');
        }, 
        // Set events
        bindEvents: function() {
            this.$setScheduleBtn.on('click', this.showReportScheduler.bind(this));
        }, 
        // Display on click
        showReportScheduler: function() {
            this.$reportSchedule.toggle();
        }

    };
    schedule.init();

})();
</script>

Выполнение этого кода на моем локальном компьютере проекта - я получаю этот результат ошибки в консоли: TypeError: this.$setScheduleBtn.on is not a functionбез переключения JQuery загружается в теге. HTML-код находится перед сценарием. jQuery JavaScript Library v1.3.2

Это JSfiddle с точным кодом, который работает правильно: https://jsfiddle.net/t6hprf4x/

В чем может быть проблема?

Answer 1

Согласно документации on функция была добавлена ​​в версию 1.7 это означает, что версия, которую вы используете, не имеет этой функции.

Вам придется использовать более новую версию библиотеки или добавить прослушиватель щелчков, используя click функция.

this.$setScheduleBtn.click(this.showReportScheduler.bind(this));