Question

我将jquery datepicker绑定到输入字段。这适用于静态上下文。但是如果我用ajax重新加载部分页面，再次调用bind方法，则找不到新加载的内容，因此我无法将我的datepicker绑定到新加载的字段。

<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

.get是一个异步调用（因为它将在加载完成之前返回并继续执行周围的代码，因此它们具有回调函数），所以问题是内容可能没有被加载你在.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();
});

我还建议，为了加快速度，不要使用正则表达式来确定添加datepicker的输入。将类添加到这些输入字段，例如class =“datepicker”，然后将bind方法更改为：

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

对于浏览器来说，查询会更快。

jquery将datepicker绑定到ajax加载的内容

1 个答案: