ajax调用后JQuery日历不起作用，但按钮在那里？答案

【问题标题】：JQuery calendar not working after ajax call, but the button is there?ajax调用后JQuery日历不起作用，但按钮在那里？
【发布时间】：2017-02-25 05:01:57
【问题描述】：

我在使用 JQuery 日历时遇到问题，它在 ajax 调用后不起作用。我尝试了很多选项，但其中任何一个都有效

这是我的 js：

function carregar(metodo, div) {
    var loading = new Image();
    loading.src = "${resource(dir: 'images', file: spinner.gif)}";
    $.ajax({
        url: metodo,
        type: "GET",
        dataType: 'text',
        beforeSend: function () {
            $("#" + div).html(loading);
        },
        success: function (data) {
            $("#" + div).html(data);

        }
    });
}

$(function () {
    $("#nascimento").datepicker({
        showOn: "button",
        buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
        buttonImageOnly: true
    });
});

这是索引，我在这里调用 ajax 函数：

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
    <head> 
        <meta name="layout" content="main" />
        <title>Cadastrar Aluno</title>
    </head>
    <body>                
        <input type="button" value="Novo"  onClick="carregar('/aluno/novo', 'divForm')"/> 
        <input type="button" value="Pesquisar"  onClick="carregar('/aluno/pesquisar', 'divForm')"/> 


    <div id="divForm">        
        <g:render template="form"></g:render>
        </div>       
    </body>
</html>

这是我的表单模板：

<asset:javascript src="application.js"/> 
<g:uploadForm controller="aluno" action="salvar">    
    //other fields
    <label>Data de Nascimento:</label>    
    <input type="text" name="nascimento" id="nascimento" required="true" value="<g:formatDate format="dd-MM-yyyy" date="${aluno?.nascimento}"/>"/><br>           
    //other fields
    <input type="submit" value="Salvar"/>
    <input type="button" name="btnCancelar" value="Cancelar"/> 
    <input type="hidden" name="id" value="${aluno?.id}">    
</g:uploadForm>

如果我放了

<script type="text/javascript">
    $(function() {
        $( "#nascimento" ).datepicker();
    });
</script>

在模板中，ir工作一次，如果我重新加载页面后再次加载“表单”模板，它不会。

我试过这个： jquery datepicker doesn't work after ajax call if its already on page JQuery datepicker not working after ajax call jQuery datepicker does not work after Ajax call

你们有什么想法吗？

谢谢！

【问题讨论】：

要替换的 html 中的日历元素是否存在？
是的，这就是问题所在。 "/>
是吗

标签： javascript jquery html ajax datepicker

【解决方案1】：

当您重新加载您的 html 时，您正在销毁附加了日期选择器的元素并重新创建它。

因此，您需要在替换 html 后重新初始化日期选择器，如下所示：

                 success: function (data) {
                    $("#" + div).html(data);
                    $("#nascimento").datepicker('remove').datepicker({
                        showOn: "button",
                        buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
                        buttonImageOnly: true
                    });

                }

【讨论】：

已经试过了，还是不行...奇怪的是，即使我不放这个，按钮/图像就在那里，但是当我点击它时不起作用
这是在我们可以看到的页面上吗？
是的，输入和按钮/图像都在那里，即使我正在使用的掩码插件也在工作，只是当我点击它时没有显示日历
不，我的意思是，你能提供一个页面链接，以便我们可以去那里看看吗？
No.. 但是当我从模板中删除时，它开始正常工作，显然这是两次导入这个 javascript 文件的问题，我的字段掩码也很奇怪；谢谢！