3

私はこのような質問をいくつか見てきましたが、私が見る限り、私はすべてを正しく行っていますが、なぜこれが機能しないのかについて少し困惑しています.

これは、クリック関数内にある私の ajax 呼び出しです。#result_areaはテーブルの tbody であり、ご覧のとおり、コンテンツを置き換えています。コンテンツは正常に読み込まれますが、テーブルの並べ替え機能が失われます。奇妙なことに、これは以前は機能していたと確信しているので、何が変わったのか少し当惑しています。firebug をチェックインしましたが、トリガーの更新が確実に呼び出されています。

アップデート

$("#result_table").trigger("update"); のときに次のエラーが発生します。と呼ばれます：

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");
                        }
                    }
            });
        }

クリック機能の呼び出し (ドキュメント準備完了):

$('#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>

どんな助けでも大歓迎です。

4

1 に答える 1

4

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 リクエストの成功コールバックで呼び出してみてください。

于 2012-12-19T15:32:37.577 に答える