Jquery bind datepicker for ajax loaded content

Question

I am binding a jquery datepicker to an input field. This works great with static context. But if I reload parts of the page using ajax, call the binding method again, then the newly loaded content will not be found, and therefore I cannot bind my datepicker to the newly loaded fields.

<script type="text/javascript">
    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();
    });
</script>

<script type="text/javascript">
    //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");
    }
</script>

Thus, I assume that I need to hook somewhere in an ajax call and run the bind_datepicker_to_date_fields method for the return values ​​of the ajax call. But the question is how?

Answer 1

.get - ( , , , ), , , , , bind_datepicker_to_date_fields() .click. ajax, :

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);
      bind_datepicker_to_date_fields();
    }, "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();
    });
    bind_datepicker_to_date_fields();
});

, - , , , datepicker. , class= "datepicker", :

function bind_datepicker_to_date_fields()
{
    $("input.datepicker").datepicker({dateFormat: 'yy-mm-dd'});
}

.