Перестают работать скрипты после добавления ajax-контента на страницу
Есть форум на PHPBB3, есть блоки в сообщениях, которые изначально свернуты и разворачиваются при наведении на них мышкой.
При добавлении нового сообщения через быстрой ответ с поддержкой ajax мой скрипт перестает работать для такого сообщения (аякс). Как мне пояснил разработчик быстрого ответа Потому что скрипты работают на той html-разметке, которая появилась после загрузки страницы, а не обновилась позже без перезагрузки. Возможно ли перезагрузить скрипт для всей страницы при обновлении аякс? т.е. отключить мой скрипт и включить его заново, например по событию .ajaxComplete()? но именно предварительно отключить, чтобы не было двойного выполнения скрипта, подключенного в document ready. на всякий случай приложу скрипт, который сейчас подключается в document ready
$('.postprofile').hover(function() {
if ($(window).width() > 843) {
$(this).find('.avatar img').stop(true, true).css({margin: '-20px 0 -40px 0'}).animate({margin: '0'},300);
$(this).find('.profile-custom-field').stop(true, true).show(300);
$(this).find('.profile-joined').stop(true, true).show(300);
$(this).find('.profile-rank').stop(true, true).show(300);
$(this).find('.profile-posts').stop(true, true).show(300);
var txt1 = '<span id="temp_added_text" style="display: block; padding-left: 70px;"><br/>▲<br/><br/></span>';
$(this).find('.profile-contact').append(txt1);
}
}, function() {
if ($(window).width() > 843) {
$(this).find('.avatar img').stop(true, true).css({margin: '-20px 0 -40px 0'});
$(this).find('.profile-custom-field').stop(true, true).hide();
$(this).find('.profile-joined').stop(true, true).hide();
$(this).find('.profile-rank').stop(true, true).hide();
$(this).find('.profile-posts').stop(true, true).hide();
$(this).find('#temp_added_text').remove();
}
});
если для иллюстрации нужна ссылка на страницу где можно посмотреть - приложу, если это не запрещено. или может быть другое решение проблемы? |
alecto,
поставьте ваш код на ближайший не перезаписываемый элемент выше $('body').on('mouseenter', '.postprofile', function() {}) также для mouseleave |
сделал как вы посоветовали и, похоже все заработало!
$('body').on('mouseenter', '.postprofile', function() {
if ($(window).width() > 843) {
$(this).find('.avatar img').stop(true, true).css({margin: '-20px 0 -40px 0'}).animate({margin: '0'},300);
$(this).find('.profile-custom-field').stop(true, true).show(300);
$(this).find('.profile-joined').stop(true, true).show(300);
$(this).find('.profile-rank').stop(true, true).show(300);
$(this).find('.profile-posts').stop(true, true).show(300);
var txt1 = '<span id="temp_added_text" style="display: block; padding-left: 70px;"><br/>▲<br/><br/></span>';
$(this).find('.profile-contact').append(txt1);
}
})
$('body').on('mouseleave', '.postprofile', function() {
if ($(window).width() > 843) {
$(this).find('.avatar img').stop(true, true).css({margin: '-20px 0 -40px 0'});
$(this).find('.profile-custom-field').stop(true, true).hide();
$(this).find('.profile-joined').stop(true, true).hide();
$(this).find('.profile-rank').stop(true, true).hide();
$(this).find('.profile-posts').stop(true, true).hide();
$(this).find('#temp_added_text').remove();
}
})
спасибо вам огромное! |
alecto,
может есть элемент ближе чем body - меньше нагрузка |
#posts - "обертка" всех сообщений на странице и, он ближе чем body.
попробовал - работает. большая нагрузка получается? |
<div id="posts">
<div id="p73275" class="post has-profile bg2 online">
<div class="inner">
<dl id="profile73275" class="postprofile">
<div class="postbody">
<div class="back2top">
</div>
</div>
<hr class="divider">
<div id="p73299" class="post has-profile bg1">
<hr class="divider">
<div id="posts_content">
<div id="post_ajax">
</div>
|
если я правильно понимаю механизм, то события мыши вызываются для каждого элемента, входящего в #posts, а дальше выполняется проверка на принадлежность классу postprofile? т.е. таких вызовов могут быть сотни или тысячи, в зависимости от содержимого и количества сообщений?
в первоначальном варианте события мыши назначались максимум 10 элементам на странице. или я ошибаюсь? |
Цитата:
|
alecto,
браузер справится но чем меньше он будет делать бесполезных проверок тем лучше. |
сообщения могут содержать десятки и сотни изображений со своими "обертками" дивами + текст со своим форматированием, видео и тд и тп.
т.е. минимум - сотни элементов, максимум - многие тысячи. поэтому актуально... Цитата:
|
| Часовой пояс GMT +3, время: 23:16. |