Skript läuft nach Ajax-Aufruf nicht ordnungsgemäß
Ich baue meine eigene Portfolio-Website auf WordPress und programmiere fast alles ohne Plugins. Die Homepage der Website verfügt über ein dynamisches Raster „Benutzerdefinierter Beitragstyp“ und ich habe einen Ajax-Filter basierend auf der Beitragsklassifizierung/-kategorie implementiert und die Beiträge basierend auf dem Filter neu angeordnet. Das Skript läuft auf 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);
}
})
});
});
Ich habe außerdem einen benutzerdefinierten Tooltip implementiert, der dem Cursor folgt und den Titel des Beitrags anzeigt, wenn man mit der Maus darüber fährt, wie unten gezeigt. Dies ist die PHP-Datei, die zwischen den Homepage-Tags ausgeführt wird:
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');
});
Und die Abfrage für das Beitragsraster (die Klasse „animated-cursor“ und der Datencursortitel sind relevante Eigenschaften):
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();
Problem: Benutzerdefinierter Cursor-Tooltip funktioniert beim Schweben von Elementen nach Verwendung des Ajax-Filters nicht. Nach dem Laden der Seite funktioniert alles wie geplant, aber Ajax wird zu keinem Zeitpunkt ausgeführt.
Soweit ich weiß (ich bin ein Anfänger in PHP, Ajax, JS), kann mein Skript nur auf Elemente zugreifen, die beim Laden der Seite vorbereitet werden. Ich versuche, das Skript nach einem Ajax-Aufruf zum Laufen zu bringen, kann es aber nicht umgehen. Hat jemand Vorschläge? Ich dachte, es wäre nicht kompliziert.
Danke!
