從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調用中獲取日志，但是在使用Uncaught ReferenceError: scheduler is not defined的onchange失敗Uncaught ReferenceError: scheduler is not defined 。 我不確定我做錯了什么。 有什么指針嗎？

謝謝

編輯：我嘗試添加一個在初始化時調用的偵聽器。 我假設由於時間問題，監聽器沒有得到綁定。 現在這是我缺乏經驗的地方我嘗試setTimeout但函數調用沒有按原樣發生。

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對象。 我不確定你將使用這個options對象做什么，但我想這不是理想的行為。

最后，就像其他人已經說過的那樣，添加事件監聽器內聯是一種不好的做法，你應該使用JavaScript以編程方式注冊偶數處理程序。 使用本機addEventListener函數或您喜歡的庫的輔助函數。

Answer 4

我不熟悉jqote，但它看起來像是一個范圍問題。 如果必須使用內聯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>

謝謝你的回復。