-
Reply
<div class="large-4 small-6 columns"> <div class="panel name-tag"> <h6>Name here</h6> <p>Description here</p> </div> </div> <div class="large-4 small-6 columns"> <div class="panel name-tag"> <h6>Name here</h6> <p>Description here</p> </div> </div> <div class="large-4 small-6 columns"> <div class="panel name-tag"> <h6>Name here</h6> <p>Description here</p> </div> </div> <div class="large-4 small-6 columns"> <div class="panel name-tag"> <h6>Name here</h6> <p>Description here</p> </div> </div>
So I have a grid 4 large-4's across. I have the the following jquery function that runs an onclick whenever a "name-tag" div is clicked it adds a class called "completed" which changes the background color. It works great, except when it's responsive. When I scale the page down the buttons no longer click. It's as if the "name-tag" onclick function isn't being registered. The "name-tag" divs aren't collapsing or anything so I'm not sure what the issue is. It's just not registering the click. Any advice would be great. Thank you!
var nameTag = $('.name-tag'); var base = 0; nameTag.on('click', function(e){ $(this).addClass('completed'); base += 1; if (base == 3) { disableButtons(); } });
Not sure what the issue was. We added a blue background to show how it works: http://cdpn.io/lDnHk
Looks good!