title: jQuery .on() not behaving as I want
body: <p>I am trying to accomplish a feature on my site that shows/hides respective parts of my site depending on the value in a select dropdown.</p>
  
  <p>HTML snippet:</p>
  
  <pre><code>&lt;tr class="inputcontainer"&gt;
      &lt;td class="label"&gt;Trade to:&lt;/td&gt;
      &lt;td class="input"&gt;
          &lt;select data-group="tradeTo"&gt;
              &lt;option value="1"&gt;Platinum&lt;/option&gt;
              &lt;option value="2"&gt;Keys&lt;/option&gt;
              &lt;option value="3"&gt;Mods&lt;/option&gt;
          &lt;/select&gt;
      &lt;/td&gt;
      &lt;td class="check"&gt;&lt;/td&gt;
      &lt;td class="errormessage"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="inputcontainer" id="trade_platinum" data-group="tradeTo" data-component="1"&gt;
      &lt;td class="label"&gt;Platinum:&lt;/td&gt;
      &lt;td class="input"&gt;&lt;input type="text" name="trade_platinum" value=""&gt;&lt;/td&gt;
      &lt;td class="check"&gt;&lt;/td&gt;
      &lt;td class="errormessage"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="inputcontainer" id="trade_keys" data-group="tradeTo" data-component="2"&gt;
      &lt;td class="label"&gt;Key:&lt;/td&gt;
      &lt;td class="input"&gt;&lt;select name="trade_keys" data-source="mod"&gt;&lt;/td&gt;
      &lt;td class="check"&gt;&lt;/td&gt;
      &lt;td class="errormessage"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="inputcontainer" id="trade_mods" data-group="tradeTo" data-component="3"&gt;
      &lt;td class="label"&gt;Mod:&lt;/td&gt;
      &lt;td class="input"&gt;&lt;select name="trade_mod" data-source="mod"&gt;&lt;/td&gt;
      &lt;td class="check"&gt;&lt;/td&gt;
      &lt;td class="errormessage"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>It logically groups all elements with the same <code>data-group</code> such that they belong to the same class.<br>
  Then it only shows the elements of which the <code>data-component</code> is the <code>value</code> of the initial select option.</p>
  
  <p>Snippet of JS which I do for all forms on my page (The HTML code is also embedded in a form):</p>
  
  <pre><code>function preprocess(form) {
      //...
      $(form).find("select").each(function() {
          var deferred = $.Deferred();
          promises.push(deferred.promise());
  
          deferred = refreshSelect($(this), deferred);
  
          var select = $(this);
          var argument = $(this).data("argument");
          if (typeof argument !== 'undefined') {
              $(document).on("change", "#" + argument, function(event) {
                  refreshSelect($(select));
              });
          }
  
          var group = $(this).data("group");
          if (typeof group !== 'undefined') {
              $(form).find("*[data-group='" + group + "'][data-component]").hide();
              $(form).find("*[data-group='" + group + "'][data-component=" + $(select).val() + "]").show();
              $(document).on("change", select, function(event) {
                  $(form).find("*[data-group='" + group + "'][data-component]").hide();
                  $(form).find("*[data-group='" + group + "'][data-component='" + $(select).val() + "']").show();
              });
          }
      });
  }
  </code></pre>
  
  <p>In the bottom part I execute my logic, it is working actually okayish, however it is triggering on too much, note the following line:</p>
  
  <p><code>$(document).on("change", select, function(event) {</code></p>
  
  <p>I should be passing a <strong>selector</strong> to the <code>.on()</code> function and not an object, however how do I know which selector I need to pass?</p>
  
  <p>The faulty behaviour as of is that it triggers on <strong>all</strong> <code>select</code> changes, instead of just the specified one.</p>