title: Count Dynamically created html elements with jquery
body: <p>I am counting the number of inputs on the current document that have value. It works fine, except for when I have dynamically added more inputs. I can't get there values. </p>
  
  <p>For example I may have</p>
  
  <pre><code>&lt;input id="participant-1"/&gt;
  &lt;input id="participant-2"/&gt;
  ...
  </code></pre>
  
  <p>Dynamically created after button click</p>
  
  <pre><code>&lt;input id="participant-15" /&gt;
  </code></pre>
  
  <p>I'll get the value of each one in a for loop like</p>
  
  <pre><code>for(var i =1 ; i &lt;25; i++)
  {
    ...$('input#participant-' + i).val();
  }
  </code></pre>
  
  <p>Now when I run a for loop to check the value of each one of these inputs it only gets the values of the  inputs that weren't dynamically created. I have looked at the other questions on here and I still can't see how to apply something like <code>.on()</code> to what I am trying to accomplish.</p>
  
  <p><strong>NEW FOLLOW UP QUESTION</strong>
  ok, now I think this is where I need more clarification concerning how to use the .on.</p>
  
  <p>I have a jsfiddle here: <a href="http://jsfiddle.net/YbnGY/5/" rel="nofollow">JsFiddle example</a></p>
  
  <p>where I create new elements and on blur of all text boxes I would like to calculate how many of the elements have value and log it. Now it currently will respond from blur event with elements who were static. It doesn't work for dynamically created elements </p>