从onchange属性调用javascript类函数

calling javascript class function from onchange attribute

本文关键字：javascript 类函数 调用 属性 onchange      更新时间：2023-09-26

我有一个简单的类，它有几个方法（目前）。我可以实例化它并调用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和Uncaught ReferenceError: scheduler is not defined中失败。我不确定我做错了什么。有指针吗？

感谢

编辑：我尝试添加一个在初始化时被调用的侦听器。我认为，由于时间问题，听众不会受到束缚。现在，这就是我缺乏经验的原因。我尝试了setTimeout，但函数调用没有按原样进行。

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

为什么不尝试在脚本中获取元素，并对其应用onchange函数呢？

var scheduler = new ScheduleViewer();
    select = document.getElementById('train_select');
scheduler.init(params);
select.onchange = function() {
   scheduler.getSchedule(this.value)
};

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

var scheduler = new ScheduleViewer();
scheduler.init(params);
$(document).on('change', '#select', function() {
   scheduler.getSchedule(this.value)
});

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

<script>
var scheduler = new ScheduleViewer(),
    params = { schedule: schedule };
scheduler.init(params);
</script>
<!-- template code... -->

此外，请注意，按照您编写代码的方式，所有ScheduleViewer实例都将共享同一个options对象我不确定您将如何处理这个options对象，但我想这不是所需的行为。

最后，正如其他人已经指出的那样，在内联中添加事件侦听器是一种糟糕的做法，您应该使用JavaScript以编程方式注册偶数处理程序。使用本机addEventListener函数或使用您喜爱的库的辅助函数。

我不熟悉jqote，但它看起来像是一个范围界定问题。如果必须使用内联onchange，请将对象引用放在窗口对象中，然后从那里访问它。

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

和

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

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

该类看起来像：

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>

感谢您的回复。

相关文章：