title: jQuery UI Datepicker on copied html elements with datepickers
body: <p>I have a form in which a user can add a set of fields dynamically as needed. The code for that just copies the last entry and increments the counters in the field names (work around for my question <a href="https://stackoverflow.com/questions/5093677/mvc-3-render-additional-editor-templates-for-children-objects">here</a>) The code follows:</p>
  
  <pre><code>$("#addBeneficiary").click(function(e) {
      e.preventDefault();
      var beneficiary = $(".beneficiary:last").clone();
      var count = parseInt(beneficiary.find("input:first").attr("id").match(/\d+/), 10);
      beneficiary.find("input").each(function(indx, element) { 
          var name = $(element).attr('name').replace(count, count+1),
              id   = $(element).attr('id').replace(count, count+1);
          $(element).attr('name', name);
          $(element).attr('id', id);
          $(element).val(''); 
      });
  
      $("#beneficiaries").append(beneficiary);
      datepicker();
  });
  </code></pre>
  
  <p>The last line <code>datepicker();</code> is just a function that finds all <code>input.datepicker</code> and executes the jQuery UI <code>datepicker()</code> function to add date pickers to those fields. The problem I'm running into is this; the datepicker works fine on the first fields, but when they are dynamically added the datepicker doesn't pop up for the new fields.</p>
  
  <p>I've traced the code execution with logging statements to ensure my <code>datepicker()</code> function is called after the append and that all works. Here is my <code>datepicker()</code> code</p>
  
  <pre><code>var datepicker = function() {
      $("input.datepicker").datepicker();
  };
  </code></pre>
  
  <p>Does anyone know why this is not working as expected?</p>