title: Jquery 'on change' eventhandler is making multiple unexpected ajax calls
body: <p>I'm creating a form where an AJAX call is made after two inputs are selected (a company value and a date value), and the returned data populates the choices available for input selections in a table.</p>
  
  <p>Here is my code: </p>
  
  <pre><code>var _cateringCo = $('#catering-company-id')
  var _orderDate = $("#order_date")
  
      $("#order_date, #catering-company-id").on('change', function(){
  
            // clear out all products in table first
            $('#sample_order_products tr').remove()
  
            //only make call if both fields do not have null values
            if(_cateringCo.val() !== "" &amp;&amp; _orderDate.val() !== ""){
  
              var data = {catering_company_id: _cateringCo.val(), order_date: _orderDate.val()};
  
              $.ajax({
                type: 'GET',
                data: data,
                url: '&lt;%= get_main_products_for_day_admin_sample_orders_path%&gt;',
                dataType: 'json',
                success: function(data){
                  var products = data.products
  
                  //append new input item to table
                  if(products.length &gt; 0){
                    $('#sample_order_products').append(addProducts(products));
                  }
  
                }
              })
  
            }
  </code></pre>
  
  <p>Here are the other two methods used to populate the table after the callback is completed:</p>
  
  <pre><code>var addOptions = function(products){
        string = "";
        for (var i = 0; products.length &gt; i; i++){
          var product = products[i]
          var name = product.display_name
          var product_id = product.product_id
  
          string += "&lt;option value='"+product_id+"'&gt;"+name+"&lt;/option&gt;"
        }
        return string
      }
  
      var addProducts = function(products){
        return "&lt;tr&gt;" +
                  "&lt;td&gt;" +
                    "&lt;select name='sample_order[sample_order_meals_attributes][][product_id]' class='validate[required]'&gt;" + addOptions(products) +
                  "&lt;/td&gt;" +
                  "&lt;td&gt;" +
                    "&lt;input name='sample_order[sample_order_meals_attributes][][quantity]' type='number' class='validate[required]'&gt;" +
                  "&lt;/td&gt;"
                "&lt;/tr&gt;"
      }
  </code></pre>
  
  <p>My problem is that <strong>when I make a change event (selecting a new date from datepicker) for the 'date' value, I'm making 3 calls</strong> (which ends up appending 3 rows to my table). </p>
  
  <p>However, <strong>when I make a change event for the 'company' value, it's only making one call</strong>, and thus appending 1 row to the table (which is what I want).</p>
  
  <p>I have no idea what's different about the change event for the date that is doing this.</p>