problem with jquery 3.5.1 in footer

Question

My Wordpress installation is ver 5.6 and Jquery ver 3.5.1.

Wordpress Gallery block supports the link to the media image large file, but the link opens the image in the same windows. I usually use Fancybox class to < a > tag to open large image in a popup (a href="big-image.jpg" class="fancybox"...).

The block gallery doesn't support class to link so I wrote a JQuery script and placed it in the footer to ADD the class to the href images of the gallery. The script starts ad document.ready.

here is the script:

jQuery(document).ready(function ($) {
 $("li.blocks-gallery-item figure a").addClass("fancybox");
 $("li.blocks-gallery-item figure a").attr('rel', 'gallery-wpblock');
});

Everything works fine until updated to WP 5.6.

If I load the WP Jquery 3.5.1 the script APPLY the class to the < a > tag BUT DOESN'T WORK, so I click the image and it opens in the same windows.

But if I load JQuery 2.2.4 the script apply the class to the < a > tag AND IT WORKS WELL, so I click the image and it opens in a popup.

Any suggestion?

Thank you in advance

Answer 1

GREAT... thank you very much. It opens my mind. I've tried to translate this eventListener in bind jQuery version, but I can't. So I modified the FancyBox Jquery to read directly wp block < a href >

$("li.blocks-gallery-item figure a").fancybox({
  /* wp block version */
});

$('.fancybox').fancybox({
  /* fancybox default standard */
});