Tabs funktionieren nicht nach Ajax Anruf

Question

Ich habe eine Seite in Tabs, die gut funktioniert, aber es hat einen Paging, ich habe einen Ajax erstellt, um die anderen Tabs zu laden. Aber nachdem ich auf die Schaltfläche geklickt habe, funktionieren die Registerkarten nicht

Dies ist meine Funktion, um meine Registerkarten zu erstellen.

var tabContainers = $('.messages'); 
    var navTab = $('div.list ul.nav li'); 

    function loadPage() { 

     $(document).on('click', navTab, function(){ 
      var the_hash = $(this).children().attr('href'); 
      tabContainers.hide().filter(the_hash).show(); 

      $('div.list ul.nav li').removeClass('active'); 
      $(this).addClass('active'); 

      return false; 
     }).filter(':first').click(); 

    }; 

Das ist mein Ajax-Aufruf

//button 
    var moreConversations = $('.btn-more-conversations'); 

    // more conversations 
    moreConversations.click(function(){ 
    var currentPage = $(this).attr('current-page'), 
     totalPages = parseInt($(this).attr('total-pages')), 
     nextPage = parseInt(currentPage) + 1; 


      $.ajax({ 
      type: "GET", 
      url: "/inbox/" + nextPage 
      }).done(function(data){ 
      if (nextPage == totalPages) { 
       moreConversations.remove(); 
      }else{ 
       moreConversations.attr('current-page', nextPage); 
      } 
      insertConversations(data); 
      }).fail(function(){ 
      sweetAlert("Oops...", "Erro ao aplicar a paginação", "error"); 
      }); 

     }); 

    function insertConversations(page) { 
    var content_nav = $(page).find('div.menu-conversations').html(); 
    var content_conv = $(page).find('div.content-conversations').html(); 
    $('div.menu-conversations').append(content_nav); 
    $('div.content-conversations').append(content_conv); 

} 

Was bin ich vergessen? Vielen Dank!!!

Answer 1

Verwenden Sie .on() Methode anstelle von .click(). Da Sie Ihre li zur Laufzeit anhängen, wird .click() Ereignis zu der zukünftigen li nicht anhängen. Daher können Sie in diesem Fall .on() Methode verwenden.

function loadPage() { 

    $(document).on('click', 'div.list ul.nav li' function() { 
     var the_hash = $(this).children().attr('href'); 
     tabContainers.hide().filter(the_hash).show(); 

     $('div.list ul.nav li').removeClass('active'); 
     $(this).addClass('active'); 

     return false; 
    }).filter(':first').click(); 

}; 

Answer 2

Ich hatte das gleiche Problem vor einigen Tagen. Die Lösung hängt damit zusammen, dass der AJAX-Aufruf das Javascript nach dem Fehlschlagen/Erfolg nicht lädt. In Ihrer done Funktion fügen Sie diesen Code:

$.getScript('js/thenameofyourfile.js'); 

Mehr Informationen in:

https://api.jquery.com/jquery.getscript/