I'm building my own portfolio website on Wordpress and writing almost the whole code without plugins. The website features a home page with a dynamic 'custom post types' grid that I've implemented an Ajax filter according to the post taxonomy/category, reordering the posts according to the filter. This script runs on script.js:

(function ($) {

  $(document).ready(function () {
    $(document).on('click', '.js-filter-item', function (e) {
      e.preventDefault();
      $('.js-filter-item').removeClass('active');
      $('.js-filter').addClass('fade');
      $(this).addClass('active');
      setTimeout(function () {
        $('.js-filter').removeClass('fade');
      }, 500);
      var category = $(this).data('category');
      $.ajax({
        url: wpAjax.ajaxUrl,
        data: { action: 'filter', category: category },
        type: 'POST',
        success: function (result) {
          // $('.js-filter').html(result);
          setTimeout(function () {
            $('.js-filter').html(result);
          }, 200);
        },
        error: function (result) {
          console.warn(result);
        }
      })
    });
  });

I've also implemented a custom tooltip that follows the cursor and shows the post title on hover, as follows. This is running on the home page php file between tags:

var follower = $('.cursor-follower');
var posX = 0,
  posY = 0;
var mouseX = 0,
  mouseY = 0;
 
$('body').on('mousemove', function (e) {
  mouseX = e.clientX;
  mouseY = e.clientY;
  posX  = (mouseX - posX) / 2;
            posY  = (mouseY - posY) / 2;
  
  $('.cursor-follower').css(
    'top', (posY - 20)   'px'
);
$('.cursor-follower').css(
    'left', (posX   50)   'px'
);
});

$('.animated-cursor').on('mouseenter', function () {
 console.log('olaaaaa');
  var dataTitle = $(this).attr('data-cursor-title');
  // var dataTags = $(this).attr('data-cursor-tags');
  follower.html(dataTitle   '<br>');
  follower.addClass('active');
});
$('.animated-cursor').on('mouseleave', function () {
  follower.removeClass('active');
});

And the query for the post grid ("animated-cursor" class and data-cursor-title are the relevant attributes):

if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post();  ?>
    <div  data-cursor-title="<?php the_title(); ?>">
        <a href="<?php the_permalink(); ?>">
        <?php $pagina = get_page_by_title('<?php the_title(); ?>') ?>
          <img src="<?php the_field('imagem_capa', $pagina); ?>" alt="">
          <div >
          <div>
            <h3><?php echo wp_strip_all_tags(get_the_term_list( $post->ID, 'portfolio_cat', '', ', ', '' )) ?></h3>
            <h2><?php the_title(); ?></h2>
</div>
          </div>
        </a>
      </div>
      <?php
        endwhile; 
      endif; 
      wp_reset_postdata(); 
       die();

Problem: the custom cursor tooltip doesn't work on element hover after using the Ajax filter. Everything runs fine as planned after page load, but it doesn't after anytime Ajax runs.

As far as I'm aware of (I'm a beginner on php, ajax, js), my script can only access the elements that are ready on page load. I've tried to make the script work after the Ajax call but I couldn't find a workaround. Would anyone have any suggestion? I suppose it mustn't be very complicated.

Thanks!

CodePudding user response：

The problem is: the javascript is binding on existed DOM, it's worked for the first rendering. But after ajax call, The new DOM will be append to HTML. The new DOM will not binding function, so the hover is not work.

The solution is, Do not binding the event to DOM itself. you can binding the event listener on the parent note or page body for example

$('body').on('mouseenter', '.animated-cursor', function () {
 console.log('olaaaaa');
  var dataTitle = $(this).attr('data-cursor-title');
  // var dataTags = $(this).attr('data-cursor-tags');
  follower.html(dataTitle   '<br>');
  follower.addClass('active');
});
$('body').on('mouseleave', '.animated-cursor', function () {
  follower.removeClass('active');
});