stacktable.js icon indicating copy to clipboard operation
stacktable.js copied to clipboard

Click Function in Stackable.js Table?

Open jinch opened this issue 7 years ago • 1 comments

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 avatar Apr 01 '17 23:04 jinch

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() {..}

jinch avatar Apr 04 '17 16:04 jinch