Событие jQuery не работает после загрузки

Question

$(document).ready(function(){ 

$(function() { 
    $('a.ajaxload').click(function(e) {   
     var url = $(this).attr('href'); 
     $('#desktopcontainer').load(url); // load the html response into a DOM element 
     e.preventDefault(); // stop the browser from following the link 
    }); 
}); 

$(function() { 
    $(".accordion .accordion-tabs .tab").each(function(){ 
     $(this).click(function(){ 
      if ($(this).hasClass('tab')){ 
      $(this).removeClass('tab'); 
      $(this).addClass('active'); 
      }else{ 
      $(this).removeClass('active'); 
        $(this).addClass('tab'); 
      } 

      $(this).next().slideToggle('slow'); 
       return false; 
     }); 
    }); 
}); 
}); 

Моя вкладка отлично работает, но после того, как я нажму «a.ajaxload», чтобы добавить содержимое на страницу, моя вкладка больше не отвечает.

Может кто-нибудь скажет мне, где проблема?

РЕШЕННЫЙ !!!

Что я сделал, так это добавить функцию после загрузки ... посмотрите на новый код ниже и увидите разницу. Надеюсь, это поможет кому-то.

$(document).ready(function(){ 

initDashboard(); 

$(function() { 
    $('a.ajaxload').click(function(e) {   
     var url = $(this).attr('href'); 
     $('#desktopcontainer').load(url); // load the html response into a DOM element 
     e.preventDefault(); // stop the browser from following the link 
     initDashboard(); 
    }); 
}); 

function initDashboard() { 
    $(".accordion .accordion-tabs .tab").each(function(){ 
     $(this).click(function(){ 
      if ($(this).hasClass('tab')){ 
      $(this).removeClass('tab'); 
      $(this).addClass('active'); 
      }else{ 
      $(this).removeClass('active'); 
        $(this).addClass('tab'); 
      } 

      $(this).next().slideToggle('slow'); 
       return false; 
     }); 
    }); 
} 

}); 

Answer 1

Вам нужно on(), поскольку она динамически добавляется (например, вставленные с помощью load метода):

$('.accordion .accordion-tabs').on('click', '.tab', function(){ 
    if ($(this).hasClass('tab')) { 
     $(this).removeClass('tab'); 
     $(this).addClass('active'); 
    }else{ 
     $(this).removeClass('active'); 
     $(this).addClass('tab'); 
    } 

    $(this).next().slideToggle('slow'); 
     return false;  
    }); 
}); 

Также нет необходимости использовать JQuery готового обработчик три раза, просто поставить все ваше JQuery связанным код внутри этого:

$(document).ready(function(){ 

}); 

Docs:

• http://api.jquery.com/on/