title: How to bind change event in Backbone?
body: <p>I am trying to load country list and on select the country i just want to call an alert , but somehow I am not able to catch change event for the select box.</p>
  
  <p>Can somebody please help me?</p>
  
  <p>here is the code with the view, model and collection part with template script in html</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Backbone&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;script type="text/template" id="country_select_template"&gt;
          &lt;select id="country-selector"&gt;
               &lt;% _.each(countries, function(country) {%&gt;
                  &lt;option value="&lt;%= country.fipsCode %&gt;"&gt;&lt;%= country.countryName %&gt;&lt;/option&gt;
              &lt;% }); %&gt;
          &lt;/select&gt;
      &lt;/script&gt;
      &lt;div id="country_select_container"&gt;
          Loading country...
      &lt;/div&gt;
  
      &lt;!--div&gt;
      &lt;select id="state" disabled=true&gt;
          &lt;option value="NAN"&gt;Select State&lt;/option&gt;                    
      &lt;/select&gt;
      &lt;/div&gt;
      &lt;div&gt;
      &lt;select id="city" disabled=true&gt;
          &lt;option value="NAN"&gt;Select City&lt;/option&gt;                    
      &lt;/select&gt;
      &lt;/div--&gt;
  &lt;/div&gt;
  &lt;ul id="names-list"&gt;
  &lt;/ul&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  Country = Backbone.Model.extend();
  
  CountryList = Backbone.Collection.extend({
      model : Country,
      url : "https://dl.dropbox.com/u/18190667/countryList.json",
      parse : function(response) {
          return response.geonames;
      }
  });
  
  Countries = new CountryList();
  
  CountryView = Backbone.View.extend({
      events: {
          "change #country-selector": "countrySelected"
      },
  
      countrySelected: function(){
          alert("You can procceed!!!");
      },
  
      countrySelected  :function(){
          alert("Procceed");
      },
  
      initialize: function(){
          var countries = [];
          var self = this;
          Countries.fetch({
              success: function(){
                  self.render();
              }
          });
      },
  
      render: function(){
          var self = this;
          var country_select_template = _.template($("#country_select_template").html(), {
              countries: Countries.toJSON(),
          });
          $('#country_select_container').html(country_select_template);
          return this;
      }
  });
  var view = new CountryView();
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>