title: select dynamically created elements using jquery
body: <p>I'm trying to have dynamically generated elements call functions, or be selected by jquery to do another action. Not having much luck so far.</p>
  
  <p>html</p>
  
  <pre><code>&lt;button id="staticButton"&gt;static button&lt;/button&gt;
  &lt;button id="onClickButton" onclick="onClickFunction()"&gt;onClick button&lt;/button&gt;
  
  &lt;div id="from-static"&gt;&lt;h3&gt;buttons created using static button&lt;/h3&gt;&lt;/div&gt;
  &lt;div id="from-dynamic"&gt;&lt;h3&gt;buttons created using dynamic buttons&lt;/h3&gt;&lt;/div&gt;
  </code></pre>
  
  <p>js</p>
  
  <pre><code>element_number = 1;
  
  $('#staticButton').on('click', function(){
      $('#from-static').append(
          '&lt;button id=' + element_number + ' &gt;' + 'Dynamic Button #' + element_number + ' generated by static button&lt;/button&gt; &lt;br/&gt;'
      );
      element_number = element_number + 1;
  });
  </code></pre>
  
  <p>how would I select the newly generated buttons?</p>
  
  <pre><code>$('?').on('click', function(){
      var currentId = $(this).attr('id'); 
      $('#from-dynamic').append(
          '&lt;button id=' + element_number + ' &gt;' + 'Dynamic Button #' + element_number + ' generated by Button #: ' + currentId + '&lt;/button&gt; &lt;br/&gt;'
      );
      element_number = element_number + 1;
  });
  </code></pre>
  
  <p>another approach perhaps: add an onclick event to generated buttons that call a function</p>
  
  <pre><code>function onClickFunction(){
      alert("should this work?");  
  }
  </code></pre>
  
  <p>but clicking on the button I get: <code>ReferenceError: onClickFunction is not defined</code></p>
  
  <p><a href="http://jsfiddle.net/waspinator/5RgWh/" rel="nofollow">http://jsfiddle.net/waspinator/5RgWh/</a></p>