title: javascript on change not working on mobile/tablet
body: <p>I have the following which works perfectly in a browser but the onchange element fails to fire on Android, and maybe other, devices. I have searched for a solution to this but my understanding of javascript is not so good, as you may be about to tell me.</p>
  
  <p>HTML:</p>
  
  <pre><code> &lt;div class=" col-md-12 col-sm-8 col-xs-8 search-panel search"&gt;
     &lt;div class=" col-md-3 col-sm-8 col-xs-8 search-panel"&gt; 
  
       &lt;form method="POST" action="/"&gt;
  
          &lt;select class="form-control home_cat_id" name="home_cat_id"&gt;
              &lt;option value='0'&gt;Select Sales or Rentals&lt;/option&gt;
              &lt;option value='12'&gt;Sales&lt;/option&gt;
              &lt;option value='1'&gt;Rentals&lt;/option&gt;
              &lt;option value='4'&gt;Rentals2&lt;/option&gt;
          &lt;/select&gt;
  
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JAVASCRIPT:</p>
  
  <pre><code>$(document).ready( function(){
  
       //Reset dropdown on page load  
         $('.home_cat_id').val(0);
  
      // Check if value has changed //
         $(".home_cat_id").on("change", function(){
  
  
      // Pass the form values to the homepage_search.html file    
          $.post('/includes/homepage_search.html', $("select[name='home_cat_id']").serialize(), function(ret){
  
      // Detect if values have been passed back   
        if(ret!=""){
  
          $('.search').html(ret);
            } else {
                 alert('ERROR');
                }
  
             });
  
      // Stop the page refreshing
        return false;
  
          }); 
       });
  </code></pre>
  
  <p>Thanks in advance for any advice given</p>