CODEWITHSUNDEEP
javascriptjquerymobiletoggle
Amber Weinberg
Amber Weinberg

Reputation: 95

jQuery show/hide toggles stops working on mobile after first fires

The URL is http://development-client-server.com/dreamscience/product-category/models/focus/focus-st/focus-st225-mk2/ and the issue is with the blue button that says "Filter Products". If you open it up on mobile, click on "Model" it opens and closes just fine. Same for the others. HOWEVER if you leave open the "Model" and then try to open another, say "Category" the toggles no longer work.

I've tried toggleClass(), toggle(), slideToggle() and straight up show() and hide() and searching around for tons of different variations. I've also tried changing "click" to "touchstart click" and just using "touchstart" with no changes.

It works fine on a regular computer with the screen reduced down to mobile size. It doesn't work on iPhone Safari running the latest version.

Here's the current version of the script:

function mobileFiltering() {
  $(document).on("click", ".prdctfltr_regular_title", function() {
    var status = $(this).hasClass('active');
    if (status) {
      $(this).removeClass('active');
      $(this).next().hide();
    } else {
      $(this).addClass('active');
      $(this).next().show();
    }
  });
}

if ($(window).width() < 975) {
  mobileFiltering();
} else {
  $('.prdctfltr_regular_title').unbind();
}

$(window).resize(function() {
  if ($(window).width() < 975) {
    mobileFiltering();
  } else {
    $('.prdctfltr_regular_title').unbind();
  }
});

Also what's even more odd, is that if I remove the show/hide toggle and just have the removeClass/addClass functionality, it works fine.

Would appreciate any help on this, as it seems to be an issue with every toggle I do in mobile.

Upvotes: 0

Views: 70

Answers (1)

tbranyen
tbranyen

Reputation: 8577

This appears to be caused by events firing too many times via the event delegation set up you have, my recommendation would be to stop all other events using stopPropagation.

Like so:

function(e) {
  e.stopPropagation();
  e.stopImmediatePropagation();

Hope this helps!

Upvotes: 1

Related Questions