Ajax呼叫後腳本無法正常運作

Question

我正在 WordPress 上建立自己的作品集網站，並在沒有外掛程式的情況下編寫幾乎整個程式碼。網站的主頁帶有動態「自訂貼文類型」網格，我已根據帖子分類/類別實現了 Ajax 過濾器，並根據過濾器對帖子重新排序。該腳本在 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);
        }
      })
    });
  });

我還實作了一個自訂工具提示，它跟隨遊標並在懸停時顯示貼文標題，如下所示。這是在主頁標籤之間運行的php檔案：

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

以及對貼文網格的查詢（「animated-cursor」類別和 data-cursor-title 是相關屬性）：

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

問題：使用 Ajax 濾鏡後，自訂遊標工具提示在元素懸停時不起作用。頁面加載後一切都按計劃運行良好，但 Ajax 運行後任何時候都不會運行。

據我所知（我是 php、ajax、js 的初學者），我的腳本只能存取頁面載入時準備好的元素。我嘗試讓腳本在 Ajax 呼叫後正常工作，但找不到解決方法。有人有建議嗎？我想它一定不會很複雜。

謝謝！

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