title: jQuery on method with ajax response
body: <p>I have a <code>&lt;select class="listenToMe" /&gt;</code>  that when changes does something. I also have a separate link that when clicked performs an ajax request and returns more dom elements and inside them it has another <code>&lt;select class="listenToMe" /&gt;</code></p>
  
  <p>I would like my event listener to be applied to this element as well. I am trying to use jQuery's on method but it doesn't appear to be working:</p>
  
  <p>JS</p>
  
  <pre><code>var selectListener = function() { alert('you change me!'};
  $('.listenToMe').on("change", selectListener);
  
  $('.addMore').click( function() {
    $.post('myWebPage.php', {} , (function(data) {
      $(this).before(data);
      // data is something like &lt;div&gt;&lt;select class="listenToMe" /&gt;&lt;/div&gt;
    }).bind(this));
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div&gt;
    &lt;div&gt;
      &lt;select class="listenToMe" /&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;select class="listenToMe" /&gt;
    &lt;/div&gt;
    &lt;a class="addMore"&gt;Click me&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any suggestions?</p>