Django表单提交后jQuery Datepicker二次点击失效问题求助

问题场景 #

开发的Django应用中，使用jQuery Datepicker选择月份展示对应发票，首次加载时Datepicker功能正常，但表单提交后，再次点击Datepicker无响应。

核心原因分析 #

表单采用同步POST提交，页面会完全刷新：

1. 页面刷新后，原Datepicker的绑定实例失效，而jQuery Datepicker会给已初始化的元素添加hasDatepicker类，阻止重复初始化
2. 模板渲染的JS变量可能存在语法错误，导致后续初始化代码无法执行
3. 页面刷新后，初始化逻辑的执行时机或处理方式不当，无法重新绑定Datepicker

具体解决方案 #

1. 修复页面刷新后的Datepicker初始化逻辑 #

先销毁残留的Datepicker实例，再重新初始化，确保页面刷新后能正常绑定：

$(function() {
    // 销毁已存在的Datepicker实例，避免冲突
    if ($('#startDate').hasClass('hasDatepicker')) {
        $('#startDate').datepicker('destroy');
    }
    
    // 重新初始化Datepicker
    $('#startDate').datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        onClose: function(dateText, inst) { 
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(year, month, 1));
        }
    });

    // 页面刷新后自动选中已筛选的月份（可选）
    {% if sel_month and sel_year %}
        $('#startDate').datepicker('setDate', new Date({{ sel_year }}, {{ sel_month }}, 1));
    {% endif %}
});

2. 改用AJAX提交表单，避免页面刷新 #

同步提交会导致页面重载，改用AJAX提交可以保留页面状态，Datepicker不会失效：

前端修改：

$(function() {
    // 初始化Datepicker
    $('#startDate').datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        onClose: function(dateText, inst) { 
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(year, month, 1));
        }
    });

    // 拦截表单默认提交，改用AJAX
    $('.supplier_search form').on('submit', function(e) {
        e.preventDefault();
        const formData = $(this).serialize();
        const url = $(this).attr('action') || window.location.href;

        $.ajax({
            url: url,
            type: 'POST',
            data: formData,
            success: function(html) {
                // 替换发票列表区域的内容
                $('.invoices_list').html(html);
            }
        });
    });
});

后端Django视图修改：

def invoice_list(request):
    # 处理月份筛选逻辑，获取invoices、sel_month、sel_year
    invoices = Invoice.objects.filter(...)
    sel_month = ...
    sel_year = ...

    # 判断是否为AJAX请求
    if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
        # 仅返回发票表格的HTML片段
        return render(request, 'invoice_table_fragment.html', {'invoices': invoices})
    else:
        # 正常请求返回完整页面
        return render(request, 'invoice_list.html', {
            'invoices': invoices,
            'sel_month': sel_month,
            'sel_year': sel_year
        })

抽离表格模板：

将原模板中<div class="invoices_list">内的表格单独保存为invoice_table_fragment.html，方便AJAX请求返回片段。

3. 修复JS变量语法错误 #

原代码中var sel_month = {{ sel_month }};如果sel_month是字符串类型（如月份名称），会导致JS语法错误，需添加引号：

var sel_month = "{{ sel_month }}";
var sel_year = "{{ sel_year }}";

JS语法错误会中断后续代码执行，包括Datepicker的初始化，这是容易忽略的点。

排查技巧 #

• 打开浏览器开发者工具（F12）→ Console标签，查看页面刷新后是否有JS报错
• 检查#startDate元素是否存在hasDatepicker类，若存在说明残留了旧的Datepicker实例

内容的提问来源于stack exchange，提问作者Daniel Ben-Shabtay