JavaScript listener not triggering

Question

I am using Wordpress, at the top of my theme I have the these scripts in this order. jquery.js - cycle2.js - header_scripts.js - lightbox.js

What I am trying to do is link the lightbox and cycle2 plugins so when you press next / prev on the lightbox the slide will change on cycle2. This code does just that.

$('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);
});

Note. lightboxNext / Prev are added as follows in the lightbox script.

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

If this code is put inside the Wordpress loop it works and is executed. However, the code cannot stay there because if there is more than one post the listener is triggered multiple times instead of once.

I tried moving my code into header_scripts.js. The code doesn't execute. The following code was added to 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);
    });
});

Loading the page and clicking the body I get the following in the console:

document ready

body clicked

Yet the lightboxNext/Prev listeners do not trigger. Why?

I also tried adding this code to the bottom of the page. Doesn't work either. For some reason the code only works when in the Wordpress loop. Any help would be most appreciated.