title: jquery validate plugin on dynamic form inputs not working
body: <p>I've a form where I'm having some fields and then if needed user can add more fields of same type. Im using <a href="http://jqueryvalidation.org/">http://jqueryvalidation.org/ validate plugin </a> to validate fields.</p>
  
  <p>As I read somewhere jquery validate plugin requires unique names to fields for validating them. So i'm naming each field uniquely. First I hoped that validate plugin will take care of dynamically added element's validation if I add rules using classes. But it turns out it does not.</p>
  
  <p>So even if name of each field is unique, validate plugin validates only first input which was rendered initially. </p>
  
  <p>I even tried using <a href="http://api.jquery.com/clone/">$.clone()</a>  in hope that it'll take care of all event bindings. But it did not worked for me. So I moved to underscore to repeat the markup as there are number of fields and I don't want to write templates in JS and name accordingly.</p>
  
  <p>I can't find a solution to this and stuck here. Can't more on until this issue is resolved. </p>
  
  <p>Here's JS that I've written. </p>
  
  <pre><code>$("#work_form").validate();
  
  $(".work_emp_name").rules("add", {
      required: true
  });
  
  _.templateSettings.variable = "element";
  var tpl = _.template($("#form_tpl").html());
  
  var counter = 1;
  
  $("form").on("click", ".add_employer", function (e) {
      e.preventDefault();
      var tplData = {
          i: counter
      };
      $("#word_exp_area").append(tpl(tplData));
      counter += 1;
  });
  </code></pre>
  
  <p>Please find markup in fiddle set up.</p>
  
  <p><a href="http://jsfiddle.net/Yy2gB/1/"><strong>example and code set up here</strong></a></p>