Click event results an error `TypeError: this.$varName.on is not a function` which isn't a function

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 库 v1.3.2

这是一个 JSfiddle，具有正确运行的确切代码： https://jsfiddle.net/t6hprf4x/

可能是什么问题？

Answer 1

根据documentation on 功能是在版本1.7 中添加的，这意味着您使用的版本没有此功能。

您将必须使用更新版本的库或使用 click 函数添加点击监听器。

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

Click event results an error `TypeError: this.$varName.on is not a function` which isn't a function

Click event results an error `TypeError: this.$varName.on is not a function` which isn't a function

javascript

jquery

modular-design