AJAX调用后，表上的jQuery Mobile ColumnToggle不起作用

Question

我有一个显示在特定页面上的表。 列切换适用于此表，因为它已在页面中加载。 表结构如下所示：

<table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke infotbl hidecol">
    <thead>
    <tr>
        <th data-priority="1" class="ui-table-priority-1">Campaign</th>
        <th data-priority="1" class="ui-table-priority-1">Description</th>
        <th data-priority="3" class="ui-table-priority-3">Leads</th>
        <th data-priority="3" class="ui-table-priority-3">Quotes</th>
        <th data-priority="3" class="ui-table-priority-3">Sales</th>
        <th data-priority="4" class="ui-table-priority-4">Premium</th>
        <th data-priority="5" class="ui-table-priority-5">P-Factor</th>
        <th data-priority="1" class="ui-table-priority-1">Lead To Quote</th>
        <th data-priority="1" class="ui-table-priority-1">Sale Conversion</th>
        <th data-priority="2" class="ui-table-priority-2">Total Comm</th>
        <th data-priority="2" class="ui-table-priority-2">IMU</th>
        <th data-priority="1" class="ui-table-priority-1">Total After IMU</th>
        <th data-priority="1" class="ui-table-priority-1">VPL</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td class="alleft">1013-HCBC-1</td>
            <td class="alleft"></td>
            <td>1</td>
            <td>0</td>
            <td>0</td>
            <td>0.00</td>
            <td>4</td>
            <td>0%</td>
            <td>0%</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
        </tr>
        <tr>
            <td class="alleft">1013-LIFE-1</td>
            <td class="alleft">medicalaidsite.co.za</td>
            <td>46</td>
            <td>15</td>
            <td>3</td>
            <td>506.00</td>
            <td>4</td>
            <td>33%</td>
            <td>7%</td>
            <td>2024.00</td>
            <td>355.09</td>
            <td>1420.35</td>
            <td>30.88</td>
        </tr>
    </tbody>
</table>

该表根据选择的日期范围而变化。 我通过AJAX发送数据，然后有一个脚本对其进行处理并返回一个与此类似的表。 问题是：列切换未应用于AJAX返回的数据（表）。

这是AJAX / Javascript代码：

$('.frankbtngo').click(function(){

        var date = $('#frankdate').val();

        $('#frankstats').html(fetch_data);

        $.ajax({
            type: 'post',
            url: 'frankstatsfilter.php',
            data: {
                date:date
            },
            success:function(data){
                $('#frankstats').html(data);
            }
        });
    });

我试图放$(".hidecol").table("refresh"); 在成功方面，但这是行不通的。 有什么办法可以重新启用/重新应用列切换到AJAX返回的表？

Answer 1

将html内容加载到页面上时，不会创建小部件。 要解决此问题，请在加载数据后触发create方法。

success:function(data){
    $('#frankstats').html(data);
    $('#frankstats').trigger('create');
}