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调用中获取日志，但随后onchange的{{1}}失败。我不确定我做错了什么。有什么指针吗？

由于

编辑：我尝试添加一个在初始化时调用的侦听器。我假设由于时间问题，监听器没有得到绑定。现在这是我缺乏经验的地方，我尝试Uncaught ReferenceError: scheduler is not defined，但函数调用没有按原样发生。

Answer 1

尝试在javascript中绑定事件并删除内联事件。

var scheduler = new ScheduleViewer();
scheduler.init(params);

$(document).on('change', '#select', function() {
   scheduler.getSchedule(this.value)
});

Answer 2

我不知道为什么这可能不起作用，但你不应该真正使用内联样式/函数。

为什么不尝试将脚本中的元素应用到onchange 函数。

var scheduler = new ScheduleViewer();
    select = document.getElementById('train_select');

scheduler.init(params);

select.onchange = function() {
   scheduler.getSchedule(this.value)
};

Answer 3

我之前从未使用过jQote，但是可能是因为jQote处理变量声明的方式？尝试在模板代码之外实现您的scheduler对象。

<script>
var scheduler = new ScheduleViewer(),
    params = { schedule: schedule };

scheduler.init(params);
</script>

<!-- template code... -->

另请注意，您编写代码的方式，所有ScheduleViewer实例将共享相同的options对象。我不确定您将使用此{{1对象，但我猜这不是理想的行为。

最后，就像其他人已经说过的那样，添加事件监听器内联是一种不好的做法，你应该使用JavaScript以编程方式注册偶数处理程序。使用本机options函数或您喜欢的库的辅助函数。

Answer 4

我不熟悉jqote，但它看起来像是一个范围问题。如果必须使用inline onchange，请将对象引用放在window对象中并从那里访问它。

window['scheduler'] = new ScheduleViewer();
window['scheduler'].init(params);

和

<select id="train_select" onchange="window['scheduler'].getSchedule(this.value)">

Answer 5

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

该课程如下：

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>

感谢您的所有回复。

从onchange属性调用javascript类函数

5 个答案: