Skrip tidak berjalan dengan betul selepas panggilan Ajax

Question

Saya sedang membina laman web portfolio saya sendiri di WordPress dan mengekod hampir keseluruhannya tanpa pemalam. Halaman utama tapak web datang dengan grid "Jenis Catatan Tersuai" dinamik dan saya telah melaksanakan penapis Ajax berdasarkan klasifikasi/kategori siaran dan menyusun semula siaran berdasarkan penapis. Skrip berjalan pada skrip.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);
        }
      })
    });
  });

Saya juga melaksanakan petua alat tersuai yang mengikut kursor dan memaparkan tajuk siaran pada tuding, seperti yang ditunjukkan di bawah. Ini ialah fail php yang berjalan di antara tag halaman utama:

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

Dan pertanyaan untuk grid siaran (kelas "kursor animasi" dan tajuk-kursor data ialah sifat yang berkaitan):

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

Isu: Petua alat kursor tersuai tidak berfungsi pada tuding elemen selepas menggunakan penapis Ajax. Segala-galanya berfungsi dengan baik seperti yang dirancang selepas halaman dimuatkan, tetapi pada masa yang sama Ajax berjalan.

Setahu saya (saya seorang pemula dalam php, ajax, js), skrip saya hanya boleh mengakses elemen yang disediakan apabila halaman dimuatkan. Saya cuba membuat skrip berfungsi selepas panggilan Ajax tetapi tidak dapat mencari jalan untuk mengatasinya. Adakah sesiapa mempunyai sebarang cadangan? Saya fikir ia tidak akan menjadi rumit.

Terima kasih!

Answer 1

Masalahnya ialah: JavaScript terikat pada DOM sedia ada, yang sah pada paparan pertama. Tetapi selepas panggilan ajax, DOM baharu akan ditambahkan pada HTML. DOM baharu tidak mengikat fungsi, jadi tuding tidak berfungsi.

Penyelesaiannya ialah, jangan ikat acara itu kepada DOM itu sendiri. Anda boleh mengikat pendengar acara pada anotasi induk atau badan halaman Contohnya

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