javascript - JavaScript リスナーがトリガーされない

Question

私はWordpressを使用しています。テーマの上部に、これらのスクリプトをこの順序で配置しています。jquery.js- cycle2.js- header_scripts.js-lightbox.js

私がやろうとしているのは、ライトボックスとサイクル 2 プラグインをリンクすることです。ライトボックスで次/前を押すと、サイクル 2 でスライドが変更されます。このコードはまさにそれを行います。

$('body').on('lightboxNext', function() {
    var slideshow = '.cycle-'+$('body').data('lightbox-slideshow');
    var index = $(slideshow).data("cycle.opts").currSlide;
    if (index > $(slideshow).data("cycle.opts").slideCount) {
        return;
    }
    $(slideshow).cycle("goto", index + 1);
});

$('body').on('lightboxPrev', function() {
    var slideshow = '.cycle-'+$('body').data('lightbox-slideshow');
    var index = $(slideshow).data("cycle.opts").currSlide;
    $(slideshow).cycle("goto", index - 1);
});

ノート。lightboxNext / Prev は、ライトボックス スクリプトに次のように追加されます。

this.$lightbox.find('.lb-prev').on('click', function() {
  $('body').trigger('lightboxPrev');
  // ...
});

このコードが Wordpress ループ内に配置されると、機能して実行されます。ただし、複数の投稿がある場合、リスナーは 1 回ではなく複数回トリガーされるため、コードはそこにとどまることはできません。

コードを header_scripts.js に移動してみました。コードは実行されません。次のコードが header_scripts.js に追加されました

$(document).ready(function() {

    console.log('document ready');

    $('body').on('click', function() {
        console.log('body clicked');
    })

    $('body').on('lightboxNext', function() {
        var slideshow = '.cycle-'+$('body').data('lightbox-slideshow');
        var index = $(slideshow).data("cycle.opts").currSlide;
        if (index > $(slideshow).data("cycle.opts").slideCount) {
            return;
        }
        $(slideshow).cycle("goto", index + 1);
    });

    $('body').on('lightboxPrev', function() {
        var slideshow = '.cycle-'+$('body').data('lightbox-slideshow');
        var index = $(slideshow).data("cycle.opts").currSlide;
        $(slideshow).cycle("goto", index - 1);
    });
});

ページを読み込んで本文をクリックすると、コンソールに次のように表示されます。

ドキュメント準備完了

ボディクリック

それでも、lightboxNext/Prev リスナーはトリガーしません。なんで？

また、このコードをページの下部に追加してみました。どちらも機能しません。何らかの理由で、コードは Wordpress ループ内でのみ機能します。どんな助けでも大歓迎です。