javascript - ajax 调用后选项卡不工作

Question

我在选项卡中有一个页面工作正常，但它有一个分页，我创建了一个ajax来加载其他选项卡。但点击按钮后，选项卡不起作用

这是我创建选项卡的函数。

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

    };

这是我的 ajax 调用

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

 }

我忘记了什么？谢谢!!!

Answer 1

使用.on()方法而不是.click()。由于您在运行时附加 li，因此它不会将 .click() 事件附加到 future 的 li。因此，在这种情况下，您可以使用 .on() 方法。

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

};