JQuery: AJAX загрузки содержимого Нет Page Refresh

Question

Я пытаюсь загрузить содержимое без перезагрузки всей страницы с этим кодом

$(document).ready(function() { 
     $('article').load('content/index.php'); 

$('a.cta , a').click(function() { 
     var page = $(this).attr('href'); 

     $('article').load('content/' + page + '.php'); 
     return false; 
    }); 
}); 

По большей части его работает отлично, как seen here:

Единственная проблема, которую я Получается, что ссылки, связанные с моей областью содержимого, не работают, но все другие ссылки за пределами моей области содержимого. Почему это? Что мне не хватает в моем коде?

Answer 1

Вы должны использовать делегированные события (on()).

$('article').load('content/index.php', function() { 
    $("article").on("click", 'a.cta , a', function() { 
     var page = $(this).attr('href'); 

     $('article').load('content/' + page + '.php'); 
     return false; 
    }); 
}); 

See the documentation для получения дополнительной информации.

Когда предусмотрен селектор, обработчик события называется делегированным. Обработчик не вызывается, когда событие происходит непосредственно на связанном элементе, но только для потомков (внутренних элементов), соответствующих селектору. jQuery создает пузырьки события от целевого объекта до элемента, в который прикреплен обработчик (т. е. самый внутренний к внешнему элементу), и запускает обработчик для любых элементов вдоль этого пути, соответствующего селектору.

Answer 2

Это необходимо для делегирования динамически добавленного элемента с помощью on. click событие не будет работать для динамически добавляемых элементов ..

попробовать это

$(document).on('click','a.cta , a',function() { 
    var page = $(this).attr('href'); 

    $('article').load('content/' + page + '.php'); 
    return false; 
}); 
}); 

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

$(article).on('click','a.cta , a',function() { 

link читать больше о on делегированных события

Answer 3

Это потому, что эти a s внутри article элемента являются динамическими. Событие click никогда не связывалось с ними. Вместо этого используйте делегирование событий:

$('article').on('click', 'a.cta, a', function(e) { 
    e.preventDefault(); //better than return false 
    var page = $(this).attr('href'); 

    $('article').load('content/' + page + '.php'); 
}); 

Answer 4

мне удалось заставить его работать с этим:

$(document).ready(function() { 
    $('article').load('content/index.php', function() { 

$(document).on('click','a.cta , a',function() { 
    var page = $(this).attr('href'); 

    $('article').load('content/' + page + '.php'); 
    return false; 
    }); 
    }); 
}); 

Это действительно расстраивает, когда вы едва знаете, что вы делаете.

Answer 5

Попробуйте прокомментировать строку return false; и все ссылки будут работать.

так ...

return false; 

изменение ...

//return false;