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'}); 
} 

查詢一樣，將成爲瀏覽器的速度要快得多。