Поддержка Проблемы и решения При ajax подгрузке теряется событие при наведении.

  • Добры день! Сделал динамический вывод следующих постов с помощью ajax подгрузки, пример которой увидел тут.
    Все работает, но есть одно НО — новые посты, которые подгружаются, прекратили реагировать на наведение мышки.
    Вот собственно говоря код шаблона:

    <?php get_header();
    	global $be_themes_data;
    	$sidebar = $be_themes_data['blog_sidebar'];
    	if( empty( $sidebar ) ) {
    		$sidebar = 'right';
    	}
    ?>
    <div id="news">
    
    			<section id="page-content" class="content-single-sidebar">
                <div class="be-section     clearfix" style="padding-top:50px;padding-bottom:0px;" id = "effective"><div class="be-row be-wrap clearfix"><div class="one-col column-block clearfix"><div class="be-text-block be-animate" data-animation="slideInLeft"><p style="text-align: center;"><span lang="RU">Мы уверены, </span>что цель любого брендингового проекта –</p>
    <p style="text-align: center;"><span lang="RU">эффективно </span><span lang="RU">решить </span>бизнес-задачу клиента. Наша вера лежит в основе</p>
    <p style="text-align: center;">ежедневной практики и объединяет все представленные работы.</p>
    </div></div></div>
    				<div class="clearfix">
    					<?php $numpost=10;//сколько записей на одной странице нам надо вывести
    if($paged>1) $offset=$numpost*($paged-1);
    else $offset=0;//чтобы знать, с какой статьи начать, если это не первая страница
    query_posts('post_type=portfolio&offset='.$offset.'&showposts='.$numpost); ?>
    
    					<?php if( have_posts() ) : ?>
    					<div id="loop">
    					<?php
    						while ( have_posts() ) : the_post(); ?>
    						<div class="post">
    				<div class="post-thumb">
    	<div class="element-inner">
    		<a href="http://case.mixis.net/polaris/news/161/" class=" mfp-image thumb-wrap"><img width="670" height="229" src="http://case.mixis.net/polaris/wp-content/uploads/2014/04/263_big-670x229.jpg" class="attachment-blog-image wp-post-image" alt="263_big" />
    				<div class="thumb-overlay" style="display: block; opacity: 0.95; transition: all 300ms ease; -webkit-transition: all 300ms ease; left: 0px; top: -100%; background: rgb(255, 255, 255);"><div class="thumb-bg">
    					<div class="thumb-icons">
    						<i class="font-icon icon-plus"></i></div>
    					</div>
    				</div>
    			</a>
    	</div>
    </div>
    
                            </div>
    						<?php endwhile;  ?>
    						<div id="pagination"><?php next_posts_link(__('БОЛЬШЕ НОВОСТЕЙ')); ?></div> </div>
    	 				<?php else:
    						echo '<p class="inner-content">'.__( 'Apologies, but no results were found. Perhaps searching will help find a related post.', 'be-themes' ).'</p>';
    					endif;
    					?>
    				</div> <!--  End Page Content -->
    			</section>
    
        </div>
    <?php get_footer(); ?>

    Не обращайте внимания на одинаковые миниатюры — я уже 10 раз переписываю решение, но эта тема не хочет поддаваться.
    Для наглядности — вот страница.
    Если есть идеи как решить этот вопрос — буду очень благодарен.

Просмотр 2 ответов — с 1 по 2 (всего 2)
  • Автор Sexaron

    (@sexaron)

    может кто знает как решить эту задачу?

    все правильно, ибо скрипты работают только для тех элементов которые были на странице, что бы скрипт работал и для элементов которые будут добавлены, необходимо использовать соответствующий метод.
    Подозреваю, что у вас jquery, для него это .on();

    Для наведения мыши будет выглядеть так,

    $(document)on('mouseover', '.selector', function() {
      /* манипуляции */
    });

Просмотр 2 ответов — с 1 по 2 (всего 2)
  • Тема «При ajax подгрузке теряется событие при наведении.» закрыта для новых ответов.