ajax调用后jQuery日历无法正常工作，但按钮是否存在？

i'm having an issue here with JQuery calendar, it doesn't work after an ajax call. I've tried a lot of options, but any of them worked

我在这里遇到了JQuery日历的问题，它在ajax调用后无效。我尝试了很多选项，但其中任何一个都有效

this is my js:

这是我的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
    });
});

this is the index, where I call the ajax function:

这是索引，我调用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>

And this is my form template:

这是我的表单模板：

<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>

If I put

如果我放

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

in the template, ir works one time, If I load the "form" template again after reloading the page, it doesn't.

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

I've tried this: 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

我试过这个：jquery datepicker在ajax调用之后不起作用如果它已经在页面上JQuery datepicker在ajax调用之后无法工作jQuery datepicker在Ajax调用之后不起作用

do you guys have any ideas?

你们有什么想法吗？

thanks!

谢谢！

1 个解决方案

#1

When you reload your html, you are destroying the element that had the datepicker attached to it and recreating it anew.

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

As such, you'll need to re-initialize the datepicker after you replace the html, with something like this:

因此，在替换html之后，您需要重新初始化datepicker，如下所示：

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

                }

#1