Jquery AJAX проблема загрузки

Question

Я пытаюсь загрузить все мои страницы сайта с помощью метода .load JQuery так, то как мой сайт выглядит:

<script type="text/javascript"> 
    $(function() { 
    $('.link').bind('click', function(e) { 
      var page = $(this).attr('href'); 
      $('#site').addClass('loading'); 
      $('#content').load(page, function(){ 
      $('#site').removeClass('loading'); 
    }); 

    e.preventDefault(); 
    return false; 
    }); 

<a href="test.php" class="link">Test</a> 

С помощью этого кода, все ссылки, который получает класс = «ссылка» загрузит мою страницу в div #content. Прекрасно работает! Нет проблем, но когда я загружаю test.php, если я использую class = "link" на любой ссылке или кнопке или что-то еще, это просто не работает, и новая страница загружается вне моего #content.

Уже пытался скопировать это в новый-загруженный файл, и он не работает, кто-нибудь получил подсказку?

Благодаря

Answer 1

Это происходит потому, что когда вы связываете событие это только связывает его с элементами, которые находятся в DOM в то время. Поэтому, если вы добавите новые позже, они не будут связаны с событием, которое вы ранее вложили. Предполагая, что у вас есть jQuery 1.3, у него есть встроенная функция, чтобы обойти это так: live. С его помощью вы можете привязать событие ко всем текущим и будущим элементам. Он не поддерживает все события, но click он поддерживает.

Так держать это в виду, вы просто должны заменить это:

$('.link').bind('click', function(e) { 

С этим:.

$('a.link').live('click', function(e) { 

(я добавил а к селектору, потому что это гораздо эффективнее укажите тег, если это вообще возможно)

Если у вас нет jQuery 1.3, вы должны обновить его как можно скорее. Если вы не можете, ознакомьтесь с плагином livequery, который достигнет того же, но гораздо менее изящным способом. Кроме того, вы можете просто иметь функцию привязки действия и вызывать ее каждый раз, когда вы загружаете новые данные. Однако все рассмотренные вопросы: live - лучший способ сделать это.