Ajax 调用后脚本未正确 运行
Script not running properly after Ajax call
我正在 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 调用后使脚本工作,但我找不到解决方法。有人会有什么建议吗?我想应该不会很复杂吧。
谢谢!
问题是: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');
});
我正在 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 调用后使脚本工作,但我找不到解决方法。有人会有什么建议吗?我想应该不会很复杂吧。
谢谢!
问题是: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');
});