0

So I'm using stackable.js (http://johnpolacek.github.io/stacktable.js/) for responsive tables and I have run across an issue with a click function I am using on an element located inside the table. The function works fine when viewed at full width on the desktop but as soon as the table is stacked via stackable.js my function no longer registers the click. I have determined this is definitely a conflict with stackable.js but not exactly sure what is preventing the functioning to trigger.

I know that stackable adds its own classes once it has collapsed, however, I am not sure this is what the issue is?

If anyone has any insight on what the issue may be please share your thoughts. Much appreciated.

Here is the Jquery function I'm hoping to get to work on the stacked table:

/*START WISH LIST STAR TOGGLE + MODAL*/
$(document).ready(function() {
    "use strict";
    $('span.star').on('click', function() {
        $(this).toggleClass('active');

        if($(this).hasClass('active')){
            $('#wishListModal').foundation('open');
            /*This is needed to redraw the slick coursel in the modal as dimentions are not properly calculated (due to it initialy hidden)*/
            $('.slick-slider').resize();
        }
    });
});
/*END WISH LIST STAR TOGGLE + MODAL*/
user7201898
  • 124
  • 16
  • I would assume that Stackable.js re-renders your table when the size of the window changes. Check if the structure of your HTML changes and read this question: http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements – Gregor Menih Apr 03 '17 at 14:44
  • Bingo!!! Thank you!! The CSS was being adjusted and it was an issue with specificity. This did the trick! – $('body').on('click', '.product span.star', function() {...} – user7201898 Apr 04 '17 at 16:42

1 Answers1

0

Thanks @ItsGreg for pointing me in the right direction.

It was due to a CSS specificity conflict with stackable.js. By declaring $('body').on('click', '.product table span.star', function() {..} you are able to work around the issue.

user7201898
  • 124
  • 16