通过ajax检索文档后添加日期选择器答案

【问题标题】：Add datepicker after retrieving document by ajax通过ajax检索文档后添加日期选择器
【发布时间】：2014-07-01 08:32:55
【问题描述】：

我一直在将 datepicker 功能添加到一些具有成功结果的文本字段，但是当我尝试将其应用于已加载到 div 中的文档时它失败了。

我用

加载文档

<a href="javascript:;" onclick="FAjax('form_ajustes_salida.php','ok4','','post');">Ajustes salida</a>

FAjax 在哪里

function FAjax(url, capa, valores, metodo){

    var ajax=creaAjax();
    if (metodo.toUpperCase()=='POST'){
        ajax.open('POST', url, true);
        ajax.onreadystatechange =function(){
            procesaAjax(ajax,capa);
            }
        ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        ajax.send(valores);
        return;
    }
    if (metodo.toUpperCase()=='GET'){
        ajax.open('GET', url, true);
        ajax.onreadystatechange =function(){
            procesaAjax(ajax,capa);
            }
        ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        ajax.send(null);
        return;
    }

    }

我尝试从主文档和加载的文档中应用日期选择器，但没有结果。

你能帮帮我吗？提前致谢

【问题讨论】：

标签： javascript php jquery html datepicker

【解决方案1】：

通常此类日期选择器插件的作用是，它会在DOM 中查找输入元素，然后将事件绑定到它以显示自定义选择器。

在您的情况下，应用日期选择器的元素稍后会使用AJAX 和javascript 加载到DOM。所以日期选择器只有在输入元素被添加到DOM后才能应用。

如果 procesaAjax(ajax,capa); 应该将响应 HTML 添加到 DOM ，那么您可以在此之后调用日期选择器初始化。

procesaAjax(ajax,capa);
$('input#myinput').datePicker();

【讨论】：

我认为它不起作用，因为 procesAjax 与 javascript 执行是异步的，所以在 DOM 加载之前它会调用日期选择器

【解决方案2】：

那是因为通常你在里面设置了日期选择器：

$(document).ready(function() {
    $(".date").datepicker({
       format : "dd-mm-yyyy"
    });
});

这将仅应用于预先存在的字段，以便在浏览器编译页面时设置日期选择器。

如果您使用 ajax 加载页面，则在加载 div 调用后：

    $(".date").datepicker({
       format : "dd-mm-yyyy"
    });

它应该可以工作。

最好的问候

【讨论】：