Calling function during data additons

phenomlab

Hi,

I have a simple function below that adds Fancybox capabilities to images as below

    $(window).on('action:ajaxify.end', function (data) {
        this.$('a img').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function () {
            $('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"]').addClass("noanimate");
               data.preventDefault()
            // Strip out the images contained inside blockquotes as this looks nasty :)
            $('blockquote img').remove();
        });
        Fancybox.bind(
            'a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"]',
                {
                    groupAll: true,
                }
           );
    });
    });

This works fine on page load, but as other data is appeneded to the dom during topic scroll etc, it is not firing - I believe because the data was not in the dom at the time, and therefore, no bindings.

Is there a simple function that detects when data is being added so I can force this function to execute each time ? Essentially, I only need to make sure this line fires

$('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"]').addClass("noanimate");

Thanks

phenomlab

@julian thanks. I tried this but it doesn't seem to work.

EDIT: Forgot document.ready - below works fine

if (top.location.pathname !== '/login') {
    $(window).on('action:posts.loaded', function(data) {
        console.log("Loaded");
        $(document).ready(function() {
            $('a').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() {
                $('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"]').addClass("noanimate");
            });
        });
    });
}

<baris>

You can listen for the posts loaded event.

const hooks = await app.require('hooks');
hooks.on('action:posts.loaded', function (data) {
    $('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"]').addClass("noanimate");
});

phenomlab

@baris Perfect. Thanks

phenomlab

@baris said in Calling function during data additons:

You can listen for the posts loaded event.

Is it possible to add this as part of my existing function, or does it need to be elsewhere ?

julian

@phenomlab Call the hook @baris suggested, instead of action:ajaxify.end

phenomlab

@julian thanks. I tried this but it doesn't seem to work.

EDIT: Forgot document.ready - below works fine

if (top.location.pathname !== '/login') {
    $(window).on('action:posts.loaded', function(data) {
        console.log("Loaded");
        $(document).ready(function() {
            $('a').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() {
                $('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"]').addClass("noanimate");
            });
        });
    });
}