I have a page in tabs that works fine, but it has a paging, I created an ajax to load the other tabs. But after I click the button, the tabs do not work
This is my function to create my tabs.
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();
};
This is my ajax call
//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);
}
What am I forgetting? Thanks!!!