从 onchange 属性调用 javascript 类函数

Question

我有一个简单的类，它有一些方法（现在）。我可以实例化它并调用 init 函数，但我不能从onchange属性调用另一个方法。

这是课程：

var ScheduleViewer = (function() {
var options = {
  container: 'trip_stops',
  schedule: {}
};

function ScheduleViewer (){};

ScheduleViewer.prototype.init = function(params) {
  $.extend(options, params);
  // setTimeout(function() {
  //   ScheduleViewer.addListener(options);
  // }, 3000);
  this.addListener(options);
}

ScheduleViewer.prototype.getSchedule = function(trip_id) {
  var _id = trip_id;
  console.log(_id);
}

ScheduleViewer.prototype.addListener = function(options) {
  console.log("adding listener");
   var _id = options.select_id;
   console.log($('#train_select').length);// zero assuming timing issue
   $('#'+_id).on('change', function() {
     alert("changed");
   })
}
return ScheduleViewer;
})();

电话

<div id="trip_stops" class="trip_options">
        <% if (trips.length > 0) {  %>
            <%
                var params = {
                schedule: schedule
              };
              var scheduler = new ScheduleViewer();
              scheduler.init(params);
            %>
            <select id="train_select">
                <option value="0" selected disabled>Select a train</option>
                <% $.each(trips, function(index, val) { %>
                    <option value="<%= val.trip_id %>">
                        <%= val.train_num %> Train
                    </option>
                <% }); %>
            </select>
        <% } else { %>
            No trips scheduled.
        <% } %>
    </div>

请注意，我使用 jqote 进行模板化。

我从 init 调用中获取日志，但随后在onchangewith 中失败Uncaught ReferenceError: scheduler is not defined。我不确定我做错了什么。任何指针？

谢谢

编辑：我尝试添加一个在初始化时调用的侦听器。我假设由于时间问题，听众没有被绑定。现在这是我的经验不足的地方，我试图setTimeout但函数调用没有按原样发生。

Answer 1

因此，为了解决这个问题，我最终将类添加到窗口对象中。我在侦听器方面遇到了问题，因为加载模板的代码不够快并且绑定没有发生。

该类看起来像：

window.ScheduleViewer = (function() {
var options = {
  container: 'trip_stops',
  schedule: {}
};

this.init = function(params) {
  $.extend(options, params); 
}

this.getSchedule = function(trip_id) {
  var _id = trip_id;
  //Do some cool stuff with GTFS data
}
//More functions

return this;
})();

模板化的 html：

<div id="trip_stops" class="trip_options">
        <% if (trips.length > 0) {  %>
            <%
                var params = {
                schedule: schedule
              };
              ScheduleViewer.init(params);
            %>
            <select id="train_select" onchange="ScheduleViewer.getSchedule(this.value)">
                <option value="0" selected disabled>Select a train</option>
                <% $.each(trips, function(index, val) { %>
                    <option value="<%= val.trip_id %>">
                        <%= val.train_num %> Train
                    </option>
                <% }); %>
            </select>
        <% } else { %>
            No trips scheduled.
        <% } %>
    </div>

感谢您的所有回复。