Tabs do not work after ajax call

Question

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!!!

Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Liam, Nov 23 '16 at 11:42
Thanks @Liam This solved my problem to load the correct content, but the tabs stopped working, I changed my code above Maybe is: var the_hash = $(this).children().attr('href'); — CodeG, Nov 23 '16 at 12:16

Samir · Answer 1 · 2016-11-23T11:38:24.220

1

Use .on() method instead of .click(). Since you are appending your li at run time, it will not attach .click() event to the future li. Hence in this case you can use .on() method.

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();

};

edited Nov 23 '16 at 11:38

answered Nov 23 '16 at 11:35

Samir

1,312
1
10
16

why? that code is identical to `$('div.list ul.nav li').click`? – Liam Nov 23 '16 at 11:36
I have updated my answer @Liam, i know it is equivalent w.r.t click functionality, but `.click()` will not fire for the future elements. Well thanks for `-ve` vote. – Samir Nov 23 '16 at 11:40
@Liam, both code are not identical. This answer is telling to use event delegation so once new items inserted into `DOM` the registered event handlers will work. – The Alpha Nov 23 '16 at 11:40
1

So your delegating the event. Right, this was not clear. Maybe add an explaination next time? – Liam Nov 23 '16 at 11:41

Carlos Vara Gil · Answer 2 · 2016-11-23T11:50:55.693

0

I had the same problem some days ago. The solution is related with the fact that the AJAX call doesn't load the Javascript after your fail/success. In your done function add this code:

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

More info in:

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

edited Nov 23 '16 at 11:50

answered Nov 23 '16 at 11:45

Carlos Vara Gil

1
1

Tabs do not work after ajax call

2 Answers2