jquery tablesorter - 在ajax更新我失去排序功能

Question

我見過這樣的幾個問題，但據我所見，我正在做的一切正確，我有點難以理解，爲什麼這是行不通的。

這是我的ajax調用這是一個點擊功能。 #result_area是表格的tbody，您可以看到我正在替換內容。內容加載正常，但我失去了表格排序功能。奇怪的是，我確信這曾經工作過，所以我對有什麼變化感到困惑。我已經檢查過螢火蟲，觸發器更新肯定會被調用。

更新

我收到以下錯誤，當$（ 「＃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準備）：

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> 

任何幫助極大的讚賞。

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請求的成功回調中調用它。