title: calling javascript class function from onchange attribute
body: <p>I have a simple class that has a few methods(for now). I can instantiate it and call the init function, but I cant call another method from the <code>onchange</code> attribute.</p>
  
  <p>here is the class:</p>
  
  <pre><code>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;
  })();
  </code></pre>
  
  <p>the call</p>
  
  <pre><code>&lt;div id="trip_stops" class="trip_options"&gt;
          &lt;% if (trips.length &gt; 0) {  %&gt;
              &lt;%
                  var params = {
                  schedule: schedule
                };
                var scheduler = new ScheduleViewer();
                scheduler.init(params);
              %&gt;
              &lt;select id="train_select"&gt;
                  &lt;option value="0" selected disabled&gt;Select a train&lt;/option&gt;
                  &lt;% $.each(trips, function(index, val) { %&gt;
                      &lt;option value="&lt;%= val.trip_id %&gt;"&gt;
                          &lt;%= val.train_num %&gt; Train
                      &lt;/option&gt;
                  &lt;% }); %&gt;
              &lt;/select&gt;
          &lt;% } else { %&gt;
              No trips scheduled.
          &lt;% } %&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Note that Im using jqote for templating.</p>
  
  <p>I get the log from the init call, but then fails in the <code>onchange</code> with <code>Uncaught ReferenceError: scheduler is not defined</code>. Im not sure what Im doing wrong. Any pointers? </p>
  
  <p>Thanks</p>
  
  <p><strong>EDIT:</strong> I made an attempt to add a listener that gets called at initialization. Im assuming that because of timing issues the listener is not getting bind. Now this is where my inexperience comes in play I tried to <code>setTimeout</code> but the function call is not happening as is.   </p>