JQuery Ajax/нагрузка становится все медленнее и медленнее

Question

Я использую следующую функцию для загрузки содержимого в #canvas по щелчку:

jQuery(document).ajaxComplete(function(){ 

    jQuery('.tabs a').on('click',function(e) { 
     e.preventDefault(); 
     jQuery('.tabs a').removeClass('active'); 
     jQuery(this).addClass('active'); 
    }); 

    jQuery('#blog').on('click',function(e) { 
     jQuery('#canvas').load('blog.php'); 
    }); 
    jQuery('#news').on('click',function(e) { 
     jQuery('#canvas').load('news.php'); 
    }); 
    jQuery('#gallery').on('click',function(e) { 
     jQuery('#canvas').load('gallery.php'); 
    }); 

}); 

HTML:

<ul class="tabs"> 
    <a id="blog">Blog</a> 
    <a id="news">News</a> 
    <a id="gallery">Gallery</a> 
</ul> 

<div id="canvas"></div> 

Это прекрасно работает, когда вкладки щелкнул первые несколько раз. Однако чем больше раз щелкает вкладки, тем медленнее содержимое загружается в #canvas. В конце концов, содержимое #canvas начинает перемещаться между каждой страницей.

Любые идеи, что может быть проблемой?

Я попытался заменить метод загрузки с помощью AJAX и установить кэширование ложным, однако проблема остается:

jQuery('#blog').on('click',function(e) { 
    jQuery.ajax({ 
     url: 'blog.php', 
     cache: false, 
     success: function(result) { 
      jQuery('#canvas').html(result); 
     } 
    }); 
}); 

Answer 1

Вы подключаетесь обработчики событий внутри события Ajax завершения, поэтому каждый раз, когда вы запускаете Ajax вы будете иметь несколько обработчиков событий, прикрепленных к вашим элементам. 1 затем 2, затем 3, затем 4 обработчика и т. Д., Делая одно и то же на каждом из них. Это нежелательное повторение в конечном итоге замедлит вашу страницу до обхода.

Использование делегированных обработчиков событий за пределами вашего вызова Ajax.

например.

jQuery(document).on('click', '.tabs a',function(e) { 
    e.preventDefault(); 
    jQuery('.tabs a').removeClass('active'); 
    jQuery(this).addClass('active'); 
}); 

jQuery(document).on('click', '#blog', function(e) { 
    jQuery('#canvas').load('blog.php'); 
}); 
jQuery(document).on('click', '#news', function(e) { 
    jQuery('#canvas').load('news.php'); 
}); 
jQuery(document).on('click', '#gallery',function(e) { 
    jQuery('#canvas').load('gallery.php'); 
}); 

Вам тогда не нужен jQuery(document).ajaxComplete(function(){.

Делегированные обработчики событий работают, слушая событие (например, click), чтобы пузыриться до элемента-предка (document по умолчанию, если ничего больше не ближе/удобнее). Затем он применяет селектор jQuery во время события, поэтому тогда объект должен существовать. Затем он применяет функцию обратного вызова события только к соответствующим элементам, которые вызвали событие.

примечание: не используйте body для делегированных событий, так как он имеет серьезную ошибку.