Foundation
-
FollowReply
-
onClick JS function on mobile
byZach Stites Wednesday, January 08, 2014 at 2:44 PM EST
<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!