Необновляемый блок div
Добрый день!
Появилась такая задача: есть сайт. Надо, чтобы при переходах на другие страницы, один блок <div> (содержится на всех страницах) не обновлялся. Там будет Flash-проигрыватель (музыка). Я уже видел подобную вещь на "вконтакте.ру". Там сейчас плеер и чат не меняет своего положения. Т.к. с jQuery почти незнаком обращаюсь к вам. Сделал так
jQuery(function($){
$('a').attr('onclick','return false;').click(function(){
var href = $(this).attr('href');
$('.wrapper').load(href+' .content', function(){
history.pushState(null, null, href);
});
});
});
Первый раз переходит - вроде все нормально (за исключением отображения комментариев вконтакте, они появляются только после перезагрузки страницы) При последующем переходе по ссылке идет обновление страницы. Подскажите где неправильно. Если будет важно: сайт написан на Smarty. На каждой странице ничего не изменяется (загружается из файла) все кроме <div id="body"> (содержимое определяется файлом index.php перед выдачей результата по $_GET['act']. Посмотреть результат можно здесь Спасибо! |
Вы назначаете обработчики события на ссылки только один раз. Соответственно, после того, как будет загружена другая страничка, на страницу будут добавлены новые ссылки, обработчик клика для которых Вы не установили.
Поэтому нужно либо заново устанавливать обработчик событий для ссылок, либо (что правильнее) использовать немного другой подход, предоставляемый методом $.live. P.S. Цитата:
|
Цитата:
.live устаревший метод, могут скоро исключить |
Цитата:
Покажите, пожалуйста (с комментариями) как использовать эти команды в моем случае. Буду очень благодарен! Спасибо! |
.delegate(селектор, событие, функция) это событие привызывает функцию, всем селектором, с которыми произошло событие. Даже с новыми, что и нужно Вам.
Простой пример:
$("body").delegate("p", "click", function(){
$(this).after("<p>Another paragraph!</p>");
});
При клике на <p> будет появляться новый параграф. И эта функция будет работать даже с "новоиспеченными" параграфами. Подробнее через поисковик. |
<script type="text/javascript">
jQuery(function($){
$("body").delegate("a", "click", function(){
var href = $(this).attr('href');
$('.wrapper').load(href+' .content', function(){
history.pushState(null, null, href);
});
});
});
</script>
Сделал так. Всегда грузит страницу заново... Ребят, ну подскажите как правильно сделать, плз. Сроки уже поджимают:С |
UP
|
jQuery(function($){
$("body").delegate("a", "click", function(){
var href = $(this).attr('href');
$('.wrapper').load(href+' .content', function(){
history.pushState(null, null, href);
});
return false;
});
});
|
Цитата:
теперь грузится все, кроме картинки :с |
а сейчас не показываются комментарии ВКонтакте -.-
а еще нужно, чтобы <head> обновлялся :с |
| Часовой пояс GMT +3, время: 21:15. |