Menu icon Foundation
onClick JS function on mobile

<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();
	}
});
            

         

javascriptjquery

<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();
	}
});
            

         
Rafi Benkual almost 6 years ago

Not sure what the issue was. We added a blue background to show how it works: http://cdpn.io/lDnHk
Looks good!