title: How to call onchange on dropdown via jquery plugin
body: <p>I've a jquery plugin created called 'testInfo'. here is the snippet:</p>
  
  <pre><code>$('#loadtest-info').testInfo({
              width: 400,
              title: 'Test Info',
              data:{
                  name: nameInfo,
                  status: statusInfo,
                  region: regions,
                  start: starttimeInfo,
                  end: endtimeInfo,
                  selectRegion:function switchRegion(){alert('')}
              }
          });
  </code></pre>
  
  <p>I have a dropdown that I need to perform a change event on: below is my underscore template</p>
  
  <pre><code>'&lt;div class="test-info" id = "test-info"&gt;&lt;dt class="label"&gt;Region:&lt;/dt&gt;&lt;dd class="value"&gt;&lt;% if ( data.region.length == 1 ) {%&gt;&lt;%= data.region %&gt;'
         +' &lt;/select&gt;&lt;% }%&gt;&lt;% if( data.region.length &gt; 1 ) {%&gt;&lt;select id = "selectedRegion"&gt;&lt;% _.each(data.region,function(field){ %&gt;&lt;option value ="&lt;%= field.id%&gt;" &lt;%= (field.select) ? "selected" : "" %&gt;&gt;&lt;%= field.name %&gt;&lt;/option&gt;'
         +'&lt;% }) %&gt;&lt;/select&gt;&lt;% }%&gt;&lt;/dd&gt;&lt;dt class="label"&gt;Start:&lt;/dt&gt;&lt;dd class="value"&gt;&lt;%= data.start %&gt;&lt;/dd&gt;&lt;dt class="label"&gt;End:&lt;/dt&gt;&lt;dd class="value"&gt;&lt;%= data.end %&gt;&lt;/dd&gt;&lt;/dl&gt;&lt;/div&gt;&lt;/div&gt;',
  </code></pre>
  
  <p>I want to call the onchange event via my plugin. I tried something like this:</p>
  
  <pre><code>var self=this;
  this.element.find('#selectedRegion').change(self.data.selectRegion)
  </code></pre>
  
  <p>there is no way i get this work. Anyone has ideas on how can I call the change event internally via plugin. I'm avoiding the use of external calling of the selector: i.e. <code>$( "#selectedRegion" ).change(switchRegion);</code> below is the entire code for my plugin:</p>
  
  <pre><code>(function ($) {
  
  $.widget('wpm.testInfo', {
  options: {
      data: {
          name: "",
          status: "",
          region: "",
          start: "",
          end: "",
          selectedRegion:''
      },
      title: "Test info"
  },
  
  _temp:  '&lt;div class="test-info" id = "test-info"&gt;&lt;h3 class="info-title"&gt;&lt;%= title %&gt;&lt;/h3&gt;'
         +'&lt;div class="region-table" id ="region-table"&gt;&lt;dl&gt; &lt;dt class="label"&gt;Name:&lt;/dt&gt;&lt;dd class="value"&gt;'
         +'&lt;%=data.name %&gt;&lt;/dd&gt; &lt;dt class="label"&gt;Status:&lt;/dt&gt;&lt;dd class="value test-status"&gt;&lt;%= data.status %&gt;&lt;/dd&gt;&lt;dt class="label"&gt;Region:&lt;/dt&gt;&lt;dd class="value"&gt;&lt;% if ( data.region.length == 1 ) {%&gt;&lt;%= data.region %&gt;'
         +' &lt;/select&gt;&lt;% }%&gt;&lt;% if( data.region.length &gt; 1 ) {%&gt;&lt;select id = "selectedRegion"&gt;&lt;% _.each(data.region,function(field){ %&gt;&lt;option value ="&lt;%= field.id%&gt;" &lt;%= (field.select) ? "selected" : "" %&gt;&gt;&lt;%= field.name %&gt;&lt;/option&gt;'
         +'&lt;% }) %&gt;&lt;/select&gt;&lt;% }%&gt;&lt;/dd&gt;&lt;dt class="label"&gt;Start:&lt;/dt&gt;&lt;dd class="value"&gt;&lt;%= data.start %&gt;&lt;/dd&gt;&lt;dt class="label"&gt;End:&lt;/dt&gt;&lt;dd class="value"&gt;&lt;%= data.end %&gt;&lt;/dd&gt;&lt;/dl&gt;&lt;/div&gt;&lt;/div&gt;',
  
  _create: function () {
      this.element.addClass('loadtest-info');
      this.element.html(_. template(this._temp,{title:this.options.title,data:this.options.data}));
  },
  
  setStatus: function(status){
     if (status){
      this.element.find('.test-info').find('.test-status').text(status);
     }
  },
  
  destroy: function () {
     this.element.removeClass('loadtest-info');
     this.element.empty();
  }
  
  });})(jQuery);
  </code></pre>