jquery的绑定日期选择器到阿贾克斯加载内容

Question

我jquery的日期选择器结合到输入字段。这与静态上下文正常工作。但是，如果我重新加载与AJAX页面的部分，再次调用bind方法，然后新加载的内容不被发现，因此我可以在我的日期选择器无法绑定到新加载的领域。

<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> 

因此，我想我必须从某个地方到Ajax调用挂钩和Ajax调用的返回值运行我bind_datepicker_to_date_fields方法。但问题是如何？

Answer 1

的不用彷徨是asynchonous调用（如它会返回并继续执行周围的代码加载完成之前，因此为什么他们有回调函数），所以这个问题是内容可能不会被加载您在.click事件中调用bind_datepicker_to_date_fields()方法的时间。此举调用到了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(); 
}); 

我也建议，使事情更快，不使用正则表达式来找出输入添加日期选择器了。一类添加到那些输入区域，而不是像类=“日期选择器”，然后改变你的绑定方法：

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

查询一样，将成为浏览器的速度要快得多。