CODEWITHSUNDEEP
javascripthtmlmobile
Larsmanson
Larsmanson

Reputation: 413

On mobile phones have to click twice to click button

I have a question. I have some product blocks where a transparent overlay comes over the product block where the buttons to show information or place in cart are shown. I use a small JavaScript function on the <a href>, but the issue is, when the product block is clicked on mobile phones, the overlay comes up, but you have to click twice to reach the buttons, because somehow it first clicks the <a href>

this is the product block:

<div class="block shadow1">
  <a href="" class="trigger"></a>
  <div class="overlay"></div>
  <div class="overlay-content smaller">
    <div class="align">
      <div class="vertical">
        <a href="'.$permalink.'" title="'.$title.'">
          <div class="button permalink">
            <div class="align">
              <div class="vertical">
                <img src="'.$imagesrc.'/images/info.svg">
              </div>
            </div>
          </div>
        </a>
        <div class="button transparent add-to-cart">
          <div class="align">
            <div class="vertical">
              <img src="'.$imagesrc.'/images/add-to-cart_1.svg">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

And this is the JavaScript:

$('a.trigger').on('click', function() {
  $(this).toggle('static');
    return false;
});

Upvotes: 5

Views: 2152

Answers (2)

Rijo
Rijo

Reputation: 2718

Please change the javascript like the following. It should be working.

$("body").on('click touchstart', 'a.trigger', function() {
    $(this).toggle('static');
    return false;
});

Upvotes: 3

Nishant Joshi
Nishant Joshi

Reputation: 221

 $('a.trigger').unbind("click").click(function(){
      $(this).toggle('static');
        return false;
    });

Upvotes: 1

Related Questions