title: jquery bind datepicker to ajax loaded content
body: <p>I'm binding the jquery datepicker to an input field. This works fine with static context. But if I reload parts of the page with ajax, call again the bind method, then the newly loaded content is not found, and thus I can not bind my datepicker to the newly loaded fields.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function ajax_get_hour_record_form()
          {
             $.get(url, function(results){
                var form = $("form.ajax_form_result", results);
                var h3 = $("h3", results);
                //update the ajax_form_result div with the return value "form"
                $('#ajax_form_result').html(form);ajax_form_h3
                $('#ajax_form_h3').html(h3);
              }, "html");
          }
  
      //ajax for capturing the href link and show the resulting form
      $( document ).ready( function() {
         $( '.add_hour_record' ).click( function(e) {
              e.preventDefault();
              url = $(this)[0].href;
              ajax_get_hour_record_form();
              //here I'm calling the bind_datepicker_to_date_fields to bind the ajax loaded fields to the datepicker. This does not work.
              bind_datepicker_to_date_fields();
          });
          bind_datepicker_to_date_fields();
      });
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      //regular expression function to select nodes based on regular expressions
      //got it from: http://james.padolsey.com/javascript/regex-selector-for-jquery/
      jQuery.expr[':'].regex = function(elem, index, match) {
          var matchParams = match[3].split(','),
              validLabels = /^(data|css):/,
              attr = {
                  method: matchParams[0].match(validLabels) ? 
                              matchParams[0].split(':')[0] : 'attr',
                  property: matchParams.shift().replace(validLabels,'')
              },
              regexFlags = 'ig',
              regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''), regexFlags);
          return regex.test(jQuery(elem)[attr.method](attr.property));
      }
  
      $(function()
      {
          //choose each field with a date string in its name and add the jquery datepicker to it
          $("input:regex(name, .*date*)").datepicker({dateFormat: 'yy-mm-dd'});
      });
  
      function bind_datepicker_to_date_fields()
      {
          //choose each field with a date string in its name and add the jquery datepicker to it
          $("input:regex(name, .*date*)").datepicker({dateFormat: 'yy-mm-dd'});
           alert("bye");
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Thus I guess I have to hook somewhere into the ajax call and run my bind_datepicker_to_date_fields method on the return values of the ajax call. But the question is how?</p>