代码之家 › 专栏 › 技术社区 › Pedro F

Ajax调用后脚本运行不正常

ajax jquery php javascript

Pedro F · 技术社区 · 2 年前

我正在Wordpress上建立自己的公文包网站,几乎不用插件就可以编写全部代码。该网站有一个带有动态“自定义帖子类型”网格的主页,我根据帖子分类法/类别实现了一个Ajax过滤器,并根据过滤器对帖子重新排序。这个脚本在脚本上运行。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');
});

以及对post grid的查询(“动画光标”类和数据光标标题是相关属性):

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调用之后,我试图让脚本正常工作,但找不到解决方法。有人有什么建议吗?我想这一定不是很复杂。

谢谢

1 回复 | 直到 2 年前

Quân Hoàng 2 年前

问题是: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');
});