Le script ne fonctionne pas correctement après l'appel Ajax

Question

Je crée mon propre site Web de portfolio sur WordPress et je code presque tout sans plugins. La page d'accueil du site Web est livrée avec une grille dynamique « Type de publication personnalisé » et j'ai implémenté un filtre Ajax basé sur les taxonomies/catégories de publication et j'ai réorganisé les publications en fonction du filtre. Le script s'exécute sur 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);
        }
      })
    });
  });

J'ai également implémenté une info-bulle personnalisée qui suit le curseur et affiche le titre du message en survol, comme ci-dessous. Voici le fichier php qui s'exécute entre les balises de la page d'accueil :

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');
});

Et une requête pour la grille des publications (la classe "animated-cursor" et data-cursor-title sont des propriétés pertinentes) :

if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post();  ?>
    <div class="reveal item animated-cursor" 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 class="post-info">
          <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();

Problème : l'info-bulle du curseur personnalisé ne fonctionne pas lors du survol d'un élément après l'utilisation du filtre Ajax. Tout fonctionne bien comme prévu après le chargement de la page, mais à aucun moment l'Ajax ne s'exécute.

Pour autant que je sache (je suis débutant en php, ajax, js), mon script ne peut accéder qu'aux éléments qui sont préparés au chargement de la page. J'essaie de faire fonctionner le script après un appel Ajax, mais je ne trouve pas de moyen de contourner ce problème. Est-ce que quelqu'un a des suggestions? Je pensais que ce ne serait pas compliqué.

Merci !

Answer 1

Le problème est le suivant : JavaScript est lié au DOM existant, qui est valide lors du premier rendu. Mais après l'appel ajax, le nouveau DOM sera ajouté au HTML. Le nouveau DOM ne lie pas les fonctionnalités, donc le survol ne fonctionne pas.

La solution est de ne pas lier l'événement au DOM lui-même. Vous pouvez lier les écouteurs d'événements à l'annotation parent ou au corps de la page Par exemple

$('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 + '
');
  follower.addClass('active');
});
$('body').on('mouseleave', '.animated-cursor', function () {
  follower.removeClass('active');
});