Проблема с загрузкой Jquery AJAX

StackOverflow https://stackoverflow.com/questions/1225860

  •  22-07-2019
  •  | 
  •  

Вопрос

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

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

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

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

Спасибо

Это было полезно?

Решение

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

Имея это в виду, вам просто нужно заменить это:

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

С этим:

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top