Skript läuft nach Ajax-Aufruf nicht ordnungsgemäß

Question

Ich baue meine eigene Portfolio-Website auf WordPress und programmiere fast alles ohne Plugins. Die Homepage der Website verfügt über ein dynamisches Raster „Benutzerdefinierter Beitragstyp“ und ich habe einen Ajax-Filter basierend auf der Beitragsklassifizierung/-kategorie implementiert und die Beiträge basierend auf dem Filter neu angeordnet. Das Skript läuft auf 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);
        }
      })
    });
  });

Ich habe außerdem einen benutzerdefinierten Tooltip implementiert, der dem Cursor folgt und den Titel des Beitrags anzeigt, wenn man mit der Maus darüber fährt, wie unten gezeigt. Dies ist die PHP-Datei, die zwischen den Homepage-Tags ausgeführt wird:

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

Und die Abfrage für das Beitragsraster (die Klasse „animated-cursor“ und der Datencursortitel sind relevante Eigenschaften):

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();

Problem: Benutzerdefinierter Cursor-Tooltip funktioniert beim Schweben von Elementen nach Verwendung des Ajax-Filters nicht. Nach dem Laden der Seite funktioniert alles wie geplant, aber Ajax wird zu keinem Zeitpunkt ausgeführt.

Soweit ich weiß (ich bin ein Anfänger in PHP, Ajax, JS), kann mein Skript nur auf Elemente zugreifen, die beim Laden der Seite vorbereitet werden. Ich versuche, das Skript nach einem Ajax-Aufruf zum Laufen zu bringen, kann es aber nicht umgehen. Hat jemand Vorschläge? Ich dachte, es wäre nicht kompliziert.

Danke!

Answer 1

问题是：JavaScript 绑定在现有的 DOM 上，它在第一次渲染时有效。 但是在ajax调用之后，新的DOM将被追加到HTML中。新的 DOM 不会绑定功能，因此悬停不起作用。

解决方案是，不要将事件绑定到 DOM 本身。您可以将事件侦听器绑定到父注释或页面主体上 例如

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