bootstrap daterangepicker not working after ajax call

I have below div which will display daterangepicker.

<div id="reportrange">
     <i class="fa fa-calendar"></i>                        
</div>

Here above div placed in partial view , and calling partial view in index page.In Index page dynamically bind data in using AJAX call.

 $.ajax({
    url: "/Orders/OrderData",
    type: "POST",
    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);
    }

After Ajax call I am not able to open calendar on div click. I bind daterangepicker using below code in document.ready() in partial view.

 $('#reportrange').daterangepicker({
        changeMonth: true,
        changeYear: true,
        singleDatePicker: false,
        showDropdowns: true,
        startDate: moment(),
        endDate: moment(),
        timePicker: true,
        timePickerSeconds: true,
        maxYear: sDate.getFullYear(),            
        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'));
    });

Can anyone please guide me on this issue.

I solved above error in which bootstrap datepicker get event conflict with sorting get event which I bind after AJAX call that's why datepicker calendar was not working. I have modified sort methods and its working.

Thanks.