HTML Button w/ jQuery $('CLASS').on('click tap touchstart', function(event) not working on mobile (WordPress BricksBuilder)

I’ve edited the code from the last time I posted this question using some advice, unfortunately the ‘DUPLICATE’ that I was linked to also did not fix the problem. Here is the code I’m working with:

<button class="brxe-button main-cta-button pricing-btn faq-btn bricks-button bricks-background-primary">Pricing</button>
<button class="brxe-button main-cta-button plans-btn faq-btn bricks-button bricks-background-primary">Plans</button>
<button class="brxe-button main-cta-button seo-btn faq-btn bricks-button bricks-background-primary">SEO</button>
<button class="brxe-button main-cta-button websites-btn faq-btn bricks-button bricks-background-primary">Websites</button>

<div id="brxe-bilrmd" class="brxe-container pricing-faq bricks-lazy-hidden">Pricing</div>
<div id="brxe-bilrmd" class="brxe-container pricing-faq bricks-lazy-hidden">Plans</div>
<div id="brxe-bilrmd" class="brxe-container pricing-faq bricks-lazy-hidden">SEO</div>
<div id="brxe-bilrmd" class="brxe-container pricing-faq bricks-lazy-hidden">Websites</div>

<script>
jQuery(document).ready(function($){

  $('.faq-btn').on('click tap touchstart', function(event) {
        event.preventDefault();
        if($(this).hasClass('pricing-btn')){

        $('.pricing-faq').show();
        $('.plans-faq').hide();
        $('.seo-faq').hide();
        $('.websites-faq').hide();
      
        $('.pricing-btn').css("background-color", "#a42d2f");
        $('.plans-btn').css("background-color", "#fff");
        $('.seo-btn').css("background-color", "#fff");
        $('.websites-btn').css("background-color", "#fff");
      
        $('.pricing-btn').css("color", "#fff");
        $('.plans-btn').css("color", "#a42d2f");
        $('.seo-btn').css("color", "#a42d2f");
        $('.websites-btn').css("color", "#a42d2f");

    } else if ($(this).hasClass('plans-btn')){

        $('.pricing-faq').hide();
        $('.plans-faq').show();
        $('.seo-faq').hide();
        $('.websites-faq').hide();

        $('.pricing-btn').css("background-color", "#fff");
        $('.plans-btn').css("background-color", "#a42d2f");
        $('.seo-btn').css("background-color", "#fff");
        $('.websites-btn').css("background-color", "#fff");
      
        $('.pricing-btn').css("color", "#a42d2f");
        $('.plans-btn').css("color", "#fff");
        $('.seo-btn').css("color", "#a42d2f");
        $('.websites-btn').css("color", "#a42d2f");

    } else if ($(this).hasClass('seo-btn')){

        $('.pricing-faq').hide();
        $('.plans-faq').hide();
        $('.seo-faq').show();
        $('.websites-faq').hide();

        $('.pricing-btn').css("background-color", "#fff");
        $('.plans-btn').css("background-color", "#fff");
        $('.seo-btn').css("background-color", "#a42d2f");
        $('.websites-btn').css("background-color", "#fff");
      
        $('.pricing-btn').css("color", "#a42d2f");
        $('.plans-btn').css("color", "#a42d2f");
        $('.seo-btn').css("color", "#fff");
        $('.websites-btn').css("color", "#a42d2f");

    } else if ($(this).hasClass('websites-btn')){

        $('.pricing-faq').hide();
        $('.plans-faq').hide();
        $('.seo-faq').hide();
        $('.websites-faq').show();

        $('.pricing-btn').css("background-color", "#fff");
        $('.plans-btn').css("background-color", "#fff");
        $('.seo-btn').css("background-color", "#fff");
        $('.websites-btn').css("background-color", "#a42d2f");
      
        $('.pricing-btn').css("color", "#a42d2f");
        $('.plans-btn').css("color", "#a42d2f");
        $('.seo-btn').css("color", "#a42d2f");
        $('.websites-btn').css("color", "#fff");
    }
});
  
});
</script>

I’ve left all the code in this time just in case the CSS changing in the jQuery is somehow messing up the other stuff.

Any help appreciated, thanks so much. Happy to provide the link to the site itself if needed, but I think that might be against the rules?

Thanks.

You need to sign in to view this answers

Related Post