ajax调用后，JQuery日历不工作，但按钮在那里

我这里有一个问题与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>

在模板中，它只工作一次，如果我在重新加载页面后再次加载"form"模板，它不会。

我试过了:Jquery日期picker在ajax调用后无法工作，如果它已经在页面上ajax调用后，JQuery日期拾取器不工作jQuery日期拾取器在Ajax调用后不工作

你们有什么想法吗?

谢谢!

当您重新加载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
                    });
                }

相关内容

最新更新

热门标签：