Bootstrap DateRangePicker在AJAX调用后无法工作的问题求助

你的核心问题在于：动态加载的局部视图元素没有重新绑定daterangepicker事件。原来的document.ready()只会在页面首次加载时执行一次，而通过AJAX插入的#reportrange元素是后续新增的，没有被初始的绑定逻辑覆盖，所以点击时没有反应。

下面是具体的修复步骤：

1. 封装daterangepicker绑定逻辑为独立函数 #

把绑定代码抽成可复用的函数，这样既可以在页面首次加载时调用，也能在AJAX完成后重新调用：

function initDateRangePicker() {
    // 先销毁已有的实例，避免重复绑定导致异常
    $('#reportrange').daterangepicker('destroy');

    $('#reportrange').daterangepicker({
        changeMonth: true,
        changeYear: true,
        singleDatePicker: false,
        showDropdowns: true,
        startDate: moment(),
        endDate: moment(),
        timePicker: true,
        timePickerSeconds: true,
        maxYear: new Date().getFullYear(), // 修正原代码中未定义的sDate
        locale: {
            format: 'MMM DD, YYYY hh:mm:ss A'
        },
        "opens": "right",
        "drops": "down"
    }, function (start, end) {
        $('#reportrange span').html(start.format('MMM DD, YYYY hh:mm:ss A') + ' - ' + end.format('MMM DD, YYYY hh:mm:ss A'));
    });
}

2. 局部视图初始化时调用函数 #

在局部视图的document.ready()中调用这个函数，确保首次加载局部视图时日历控件能正常工作：

$(document).ready(function() {
    initDateRangePicker();
});

3. AJAX成功后重新绑定控件 #

修改Index页面的AJAX代码，在插入新内容后立即调用绑定函数，让动态加载的#reportrange元素获得日历功能：

$.ajax({
    url: "/Orders/OrderData",
    type: "POST",
    async: true, // 建议去掉async:false，同步请求会阻塞页面，影响用户体验
    beforeSend: function () {
        $('#hdnPages').attr('data-status', false);
    },
    data: {
        'PageNo': PageNo,
        'Keyword': Keyword,
        'FromDate': FromDate,
        'ToDate': ToDate,
        'FromPrice': FromPrice,
        'ToPrice': ToPrice,
        'Status': Status,
        'Items': Items
    },
    success: function (res) {
        $('#OrderList').append(res);
        // 关键步骤：插入内容后重新初始化日历控件
        initDateRangePicker();
    }
});

额外注意事项 #

• 确保moment.js和daterangepicker的脚本文件在Index页面中已正确引入，且加载顺序正确（moment需在daterangepicker之前加载）
• 如果局部视图会被多次加载，销毁旧实例的步骤不能省略，否则会出现重复绑定导致的控件行为异常

内容的提问来源于stack exchange，提问作者ANAL KUKADIYA