Ajax 调用后脚本未正确运行

Question

我正在 Wordpress 上构建我自己的投资组合网站，并在没有插件的情况下编写几乎所有代码。该网站的主页带有动态 'custom post types' 网格，我根据 post taxonomy/category 实施了 Ajax 过滤器，根据 post 重新排序到过滤器。此脚本在 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);
        }
      })
    });
  });

我还实现了一个自定义工具提示，它跟随光标并在悬停时显示 post 标题，如下所示。这是主页上的运行 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');
});

以及 post 网格的查询（“animated-cursor” class 和 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 + '<br>');
  follower.addClass('active');
});
$('body').on('mouseleave', '.animated-cursor', function () {
  follower.removeClass('active');
});

Ajax 调用后脚本未正确运行

Script not running properly after Ajax call

javascript

php

jquery

ajax

Ajax 调用后脚本未正确 运行

Script not running properly after Ajax call

javascript

php

jquery

ajax

Ajax 调用后脚本未正确运行