Finsweet Attributes prev/next button functions

Design help Custom code
1

Hi everyone! I can usually figure out workarounds using custom code but I’ve been stumped for days on this one…

I am using a combination of Finsweet’s CMS Filter + CMS Load to filter a collection list and achieve seamless pagination.

For the core functionality of my site to work, I need to run some jQuery (and/or JS) functions when pagination’s next and previous buttons are pressed, and also on filter reset (when “tag-remove” is pressed).

I have successfully managed to achieve this with the pagination’s next button by giving the button an ID (targeting its class didn’t work) and running a script which targets that ID e.g.:

$("#next-button").on('click', function() {
// do this
});

However this approach has not worked on the previous button or filter reset button, for unknown reasons (I would assume if it works on the next button then it should be the same for the previous button, but nope!).

Here are some alternate solutions I have tried, but which also failed:

  1. Giving them a class (such as ‘.prev-button’) and targeting that instead.

  2. Giving them an attribute (such as “[previous=test]”) and targeting that instead.

  3. Placing the previous button inside a div and targeting the div’s class/ID.

  4. Placing a div inside the previous button and targeting the div’s class/ID.

  5. Applying Webflow interactions to them.

  6. Adding attribute of fs-cmsload-resetix = true to my collection list and adding Webflow interactions.

  7. Applying delays via timeout functions of varying durations using jQuery, in case an earlier function is overriding my new function.

There must be some way of finding these events and triggering my own functions when they occur, but I’m at the limits of my dev capabilities and running out of ideas.

Help or even just suggestions of other things I can try would be greatly appreciated!

Thanks,
O