При нажатии на ссылки навигации работает запрос AJAX. После загрузки элементов страницы через AJAX подменяются ссылки навигации. Далее при клике по этим элементам навигации AJAX запрос перестает работать.
Код примерно следующий:
$(document).ready(function() {
//При клике на ссылке навигации
$('.navi').on ('click', function(myfunc) {
myfunc.preventDefault(); //ссылка нормально не работает
var myid = getUrlVars($(this).attr('href'))["id"]; //при помощи функции, которая ниже, вытягиваем из ссылки адрес и далле значение параметра id
$.get('get_text.php', {id:myid}, function(data) { //AJAX запрос
//... - загрузка тайтлов, метаинформации, текста
//Далее загрузка элементов навигации
//...
$('#id_next').html(data.id_next); // заменяем <span id='id_next'><a href='view_text.php?id=23' class='navi'>Ссылка_далее1</a></span> на <a href='view_text.php?id=24' class='navi'>Ссылка_далее2</a>
}, "json" );
});
});
// так как ссылки в меню навигации имеют вид
http://lalalalala.com/view_text.php?id=23 то функция вытаскивает значение ключей
function getUrlVars(fromHref) {
var vars = [], hash;
var hashes = fromHref.slice(fromHref.indexOf('?') + 1).split('&');
for (var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
};
//если использовать правильно $(document).on ('click', $('.navi'), function(myfunc) {}); то я не знаю как работать с кликнутым элементом $('.navi'), $(this) - это будет $(document)...
//в итоге jQuery код срабатывает только 1 раз, далее даже myfunc.preventDefault(); не работает
Примечание:
Код на jsFiddle:
http://jsfiddle.net/9E9Kp/
Примечание:
Консоль не выдает ошибок. Первый переход по ссылке проходит гладко. После замены ссылки на новую через AJAX и клике по ней код jQuery не выполняется вообще, хотя генерируемая ссылка полностью идентична предыдущей.
Примечание:
Изменил на live() - все заработало. Но есть одно но.
Дело в том, что сейчас все обработчики live(), bind() и пр. переходят на on(). В случае с $(document).on('click', '.navi', function(){}); я не понимаю, как в теле функции узнать, какой из .navi был нажат. $(this) выдает $(document) и не работает функция определения id из новой ссылки. Подскажите, как определить кликнутый .navi.
Примечание:
Все, я понял. Нужно было использовать не $(document).on('click', $(.navi), function(){}); а $(document).on('click', '.navi', function(){});
Я тупой, спасибо!
RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.
Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.
Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.