title: applying Datepicker to newly created input using Live()
body: <p>I am having a problem with the jQuery datepicker. My form has a "add another" button to give the user a extra row so they can enter more then one match. I want the date to display the datepicker and found how to do it with the live() function </p>
  
  <pre><code>        $(function() {
          $('#AddAnother').bind('click', function(event) {
              var tablerow = $('#CreateMatch tr:last').html();
              $('#CreateMatch tr:last').after('&lt;tr&gt;' + tablerow + '&lt;/tr&gt;');
          });
  
          $('input.Datetime').live('click', function() {
              $(this).datepicker({
                  showOn: 'focus',
                  changeMonth: true,
                  changeYear: true,
                  dateFormat: "dd-mm-yy"
              }).focus();
          });
  
      });
  </code></pre>
  
  <p>As you can see there is the <code>AddAnother</code> bind which builds the new row and the <code>.live</code> feature which should apply it to newly added textboxes with the Datetime class. Inspecting the elements with chrome shows that they textbox is getting "hasDatePicker" class that jQuery adds to them but I think this is only because of how it is dupilicating the row.</p>
  
  <p>Here is all my html:</p>
  
  <pre><code>&lt;div id="MatchForm"&gt;
          &lt;table id="CreateMatch"&gt;
              &lt;tr&gt;
                  &lt;th&gt;Prospect&lt;/th&gt;
                  &lt;th&gt;&lt;/th&gt;
                  &lt;th&gt;Opponent&lt;/th&gt;
                  &lt;th&gt;Match Date&lt;/th&gt;
                  &lt;th&gt;Location&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;select name="Prospect"&gt;
                          &lt;option value=""&gt;Select prospect...&lt;/option&gt;
                          &lt;% foreach (var p in Model.AllProspects){  %&gt;
                          &lt;option value="&lt;%= p.BoxerId %&gt;"&gt;&lt;%= p.BoxerNameReverse %&gt;&lt;/option&gt;
                          &lt;%} %&gt; 
                      &lt;/select&gt;
                  &lt;/td&gt;    
                  &lt;td&gt;vs&lt;/td&gt;
                  &lt;td&gt;
                      &lt;select name="opponent"&gt;
                          &lt;option value=""&gt;Select opponent...&lt;/option&gt;
                       &lt;% foreach (var p in Model.AllBoxers   )
                         {  %&gt;
                          &lt;option value="&lt;%= p.BoxerId %&gt;"&gt;&lt;%= p.BoxerNameReverse %&gt;&lt;/option&gt;
                      &lt;%} %&gt; 
                      &lt;/select&gt;                    
                  &lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" class="Datetime" name="matchDate" style="width:100px" /&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" id="Location" name="Location" style="width:100px" /&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;input type="button" name="AddAnother" id="AddAnother" value="Add Another" /&gt;
          &lt;input type="submit" name="submit" value="Submit" /&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>So you know it does work on the first textbox which loads up but the live binding doesn't seem to work and apply it to new textboxes!</p>