johnpolacek / stacktable.js

jQuery plugin for stacking tables on small screens
http://johnpolacek.github.io/stacktable.js/
Other
1.03k stars 167 forks source link

Click Function in Stackable.js Table? #55

Open jinch opened 7 years ago

jinch commented 7 years ago

Not sure I stumbled on a bug, but recently I found that my stackable table using "stackable.js" will not run a click function calling toggleClass on an element. It works fine in desktop view but when scaled down and the stackable.js is triggered, my function stops working. This is only happening when the table is stacked and is only effecting elements inside the table.

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"; $('.product table 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)*/
$('[data-reveal]').on('open.zf.reveal', function() {
    $('.slick-slider').resize();
});

}); /END WISH LIST STAR TOGGLE + MODAL/`

Any advice or insight on the issue is much appreciated.

jinch commented 7 years ago

If anyone has a similar issue it was due to CSS specificity. By adjusting my click function to scope the body I was able to work around the issue.

Like so: $('body').on('click', '.product table span.star', function() {..}