手风琴表 + 日期范围选择器 + 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);
        }
    });
});