title: Jquery child element on change
body: <p>I am trying, using jquery, to trigger an event when a child element, in this case select, changes.</p>
  
  <p><strong>Here is my HTML</strong>:</p>
  
  <pre><code>&lt;div id="addForm" ng-repeat="forme in formes" class="row addForm"&gt;
      &lt;div class="col-lg-2 col-md-2 col-sm-3 col-xs-6"&gt;
          &lt;select id="geo_{{forme.id}}" ng-model="forme.geo" class="form-control"&gt;
              &lt;option value="rectangle"&gt;Rectangle&lt;/option&gt;
              &lt;option value="triangle"&gt;Triangle rectangle&lt;/option&gt;
              &lt;option value="cercle"&gt;cercle&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>The javaScript</strong> that is not working yet:</p>
  
  <pre><code>$(document).ready(function () {
      $(document.body).on("change", "#addForm &gt; select", function () {
          alert(this.value);
      });
  });
  </code></pre>
  
  <p>OR  </p>
  
  <pre><code>$(document).ready(function () {
      $(document.body).on("change", ".addForm &gt; select", function () {
          alert(this.value);
      });
  });
  </code></pre>
  
  <p>Both method are not working</p>
  
  <p>What is wrong with this?</p>