手风琴表+日期范围选择器+ AJAX

Question

我正在尝试更改日期范围选择器中的日期时更改DIV的内部。我正在使用Date Range Picker和Accordion Table来帮助这个页面。

DIV包含一个折叠表，当使用日期范围选择器选择不同的日期范围时，该表会更改以显示不同的数据日期范围。当表重新生成时，它将不再像手风琴部分那样打开和关闭。

这是我页面上的HTML / PHP，它生成表和日期范围选择器：

<!-- Date selector -->
<div id="reportrange">
    <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
    <span></span>
</div>

<!-- Our table -->
<div id="replace">
    <?php
        $yesterday = date("m/d/Y", strtotime('-31 hours'));
        table($yesterday, $yesterday);
    ?>
</div>

在页面的底部，我有日期范围选择器的所有信息以及调用table（）函数的AJAX调用。这是AJAX调用：

// AJAX call to our php function which creates the table
$.ajax({
    url: 'php/jstranslator.php',
    type: 'post',
    data: {'action': 'table', 'start': begin, 'stop': stop},
    success:function(result){
        document.getElementById("replace").innerHTML = result;
    },
    error: function(xhr, desc, err) {
        console.log(xhr);
        console.log("Details: " + desc + "\nError:" + err);
    }
});

我需要帮助弄清楚为什么我的表将在数据重新生成后不再打开/关闭。如果您检查页面并查看内容，您可以看到该表中包含您无法看到的所有数据！

Answer 1

感谢那些帮助过的人！

我的问题是js事件与原始表绑定在一起。所以我要做的就是添加使表格打开并接近ajax成功语句结尾的javascript。

/* When the date range is changed, update the table
 */
$('#reportrange').on('apply.daterangepicker', function(ev, picker) {
    var begin = picker.startDate.format('MM/DD/YYYY');
    var stop = picker.endDate.format('MM/DD/YYYY');

    // AJAX call to our php function which creates the table
    $.ajax({
        url: 'php/jstranslator.php',
        type: 'post',
        data: {'action': 'table', 'start': begin, 'stop': stop},
        success:function(result){
            document.getElementById("replace").innerHTML = result;
            $(function(){
                $(".fold-table tr.view").on("click", function(){
                    $(this).toggleClass("open").next(".fold").toggleClass("open");
                });
            });
        },
        error: function(xhr, desc, err) {
            console.log(xhr);
            console.log("Details: " + desc + "\nError:" + err);
        }
    });
});