Question

我已经看过这样的一些问题，但据我所知，我正在做的一切正确，我有点难过为什么这不起作用。

这是我的ajax调用，它位于click函数中。 #result_area是表的内容，正如您所看到的，我正在替换内容。内容正在加载正常，但我失去了表排序功能。奇怪的是，我确信这曾经有用，所以我对改变了什么感到有些困惑。我已经检查过firebug，并且肯定会调用触发器更新。

更新

$ $（“＃result_table”）时，我收到以下错误。触发器（“更新”）;被称为：

Error: TypeError: parsers[i] is undefined
Source File: http://swishprint.dev/assets/js/common/jquery.tablesorter.js
Line: 483

第483行指的是：

function getCachedSortType(parsers,i) {
return parsers[i].type;
};

表初始化函数（在doc ready中调用）：

    function table_init() {
        $('#result_table').tablesorter({
        widgets: ['zebra'],
        widgetZebra: {
            css: ["dark", "darker"]
        },
        headers: {
            0: {
            sorter: false
            },
            5: {
            sorter: false
            },
            7: {
            sorter: false
            },
            8: {
            sorter: false
            }
          }
       });
}

点击功能：

    function leftsort_click(event) { //main sort click (left menu)

    //build url and other unrelated stuff
            var page = window.name,
            page_index, api = $('#right_pane').jScrollPane({
                showArrows: true,
                maintainPosition: false
            }).data('jsp');   
            if (!$(this).hasClass('sort_cat')) {        
            $('ul.sort_ul li, ul.cat_items li').removeClass('active');
            $(this).addClass('active');
            var sid = $(this).attr('id');
            var title = $(this).html();
            var loadUrlx = page;
            if ((sid != '') && (sid != 'undefined')) {
                loadUrlx += '/' + sid;
            }
            var loadUrlStub = loadUrlx;
            if ($('.rpp_btn.active').length >= 1) {
                var res_per_page = $.trim($('.rpp_btn.active').html());
                page_index = $.trim($('.res_page_select.active a').html());
                if (($('.rpp_btn.active').hasClass('just_clicked')) || (!$('.res_page_select').hasClass('just_clicked'))) {
                page_index = '1';
                }
                if ((page_index != 1) || (res_per_page != 25)) {
                loadUrlx += '/' + page_index + '/' + res_per_page;
                }
                $('.rpp_btn, .res_page_select').removeClass('just_clicked');
            }       
            loadUrlx = b_url + loadUrlx;
            if (History.enabled) {
                History.pushState(null, null, loadUrlx);
                //var hash=History.getHash(), rootUrl = History.getRootUrl(), State = History.getState(), url = State.url, relativeUrl = url.replace(rootUrl,'');
            }
//Ajax call            
              $.ajax({
                    cache: false,
                    url: loadUrlx,
                    success: function(result) {
                        $("#result_area").html(result);
                        if ((page != 'home') && (page != 'guides')) {
                            var count_ele = $('.hidden_rescount').length;

                            //get td width and set width of table headers
                            api.reinitialise();
                            tsizer();
                            $("#result_table").trigger("update");
                        }
                    }
            });
        }

要求点击功能（在doc准备好中）：

$('#mainc').on("click", "ul.sort_ul li, ul.cat_items li", function(event) {
    leftsort_click.call(this);
    });
    }

我的HTML

<table width="100%" class="result_table tablesorter scrollableFixedHeaderTable" id="result_table" style="">
    <thead id="t_header">
        <tr>
            <th class="border_apps th_first th_img no-sort" id="th_img">IMG</th>
            <th class="border_apps th_name header headerSortUp" id="th_name">NAME</th>
            <th class="border_apps th_cat header" id="th_cat">CAT</th>
            <th class="border_apps th_urate header" id="th_urate">RATING <small>(USER)</small></th>
            <th class="border_apps th_orate header" id="th_orate">RATING <small>(ODDBALL)</small></th>
            <th class="border_apps th_info no-sort" id="th_info">INFO</th>
            <th class="border_apps th_alert header" id="th_alert">W</th>            <th class="border_apps th_edit no-sort" id="th_edit">EDIT</th>            <th class="border_apps th_last th_link no-sort" id="th_link">LINK</th>
        </tr>
    </thead>
    <tbody id="result_area">
//results here

</tbody>
</table>

非常感谢任何帮助。

Answer 1

您需要使用jQuery的on（）方法（特别是事件委派）来考虑动态加载的信息（通过Ajax）。 http://api.jquery.com/on/

当您最初加载页面时，所有jQuery代码都是针对当时页面中存在的元素运行的。在此之后，jQuery / JavaScript不知道动态加载内容对DOM所做的任何更改。使用on（）的委托方法，您可以绑定到加载时页面上存在的容器。当动态内容添加到容器中时，容器中触发的任何事件都会冒泡到现有元素，然后正确执行。

例如，你可以做这样的事情 -

$('#result_area').on('event', 'element_causing_event', function() {...

在这种情况下，element_causing_event将使事件冒泡到#result_area，然后可以处理它。

在检查了文档（http://tablesorter.com/docs/example-ajax.html）之后，您似乎可以更新表格以让插件知道已添加数据 -

$('#result_table').trigger('update');

这应该允许正常排序。尝试在AJAX请求的成功回调中调用它。

jquery tablesorter - 关于ajax更新我失去了排序功能

1 个答案: