title: Add validation rules using jquery validate plug-in on dynamically generated elements
body: <p>I am trying to add some validation rules on an input created from html literals.</p>
  
  <p>This is my fiddle: <a href="http://jsfiddle.net/idoxobi/HW4xY/1/" rel="nofollow">http://jsfiddle.net/idoxobi/HW4xY/1/</a></p>
  
  <p>Html:</p>
  
  <pre><code>&lt;form id='form' method='post' &gt;
      &lt;div id='details'&gt;
      &lt;/div&gt;
      &lt;a id='Add' href='javascript:void()'&gt;Add&lt;/a&gt;
      &lt;br /&gt;
      &lt;input type='submit' /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>$(document).ready(function() {
      $('#form').validate();
      var input = "&lt;input type='text' class='item' name='item' /&gt;";
      $('#Add').click(function() {
          $('#details').append(input+'&lt;br /&gt;');
          $('#details input:last').rules('add', {
              required: true
          });
      });
  })
  </code></pre>
  
  <p>It seems to recognize the rule just in the first element, but the others pass without validation.</p>
  
  <p>Is the first time I use this plug-in, but in the forums everyone says this should work just fine.</p>
  
  <p>Any suggestions?</p>