CODEWITHSUNDEEP
javascriptjqueryajaxwordpresswoocommerce
Dan185
Dan185

Reputation: 356

Woocommerce functionality is inhibited after AJAX page transition

I have an ajax transition which is this: 

function fadeTransition(href = window.location.href) {

  $('.fader').css({
    'position': 'fixed',
    //        'height': h,
    'height': '100vh',
    'width': '0',
    'left': '0',
    'top': '0',
    'color': 'black',
    'background-color': 'black',
    'z-index': '300'
  }).animate({
    'width': '100vw',
  }, 400, function() {
    $('.slider-transition').load(href + ' .slider-transition', function() {
      //            EXECUTES ON CALLBACK
      // $('.slider-transition').children('.slider-transition').unwrap();
      //            h = $(document).height();
      $('.fader').animate({
        'left': '100vw'
      }, 400, function() {
        slideShowInit();
        initParalax();
        $('.woocommerce-product-gallery').each(function() {
          $(this).wc_product_gallery();
        });
        $('.slider-transition').children('.slider-transition').unwrap();
        // $('.slider-transition').parents('.slider-transition').unwrap();
      });
    });
  });
}

It's a simple transition that loads the element from the next page into the element of the current page and by attaching all of the click events to the body as such:

$('body').on('click', '.main-menu li a, nav a, a.button, a.square, a.grow', function(event) {
  event.preventDefault();
  event.stopPropagation();
});
$("li").on("click", "a", function(event) {
  var _href = $(this).attr("href");
  history.pushState(null, null, _href);
  fadeTransition(_href);
});

I've been able to circumnavigate the problem of click events being destroyed after the transition. The only problem that with the Woocommerce plugin in Wordpress, I can't possibly hope to traverse the entire assets folder of JS and replace 

$('.a').on('click', function() {});

with 

$('.body').on('click', 'a', function() {});

and attach all of the DOM events to the body like this and even then I'm only 70% sure this is the problem, does anyone know a way around this?

Upvotes: 0

Views: 207

Answers (1)

LoicTheAztec
LoicTheAztec

Reputation: 253968

Remove an event handler with jQuery using off()

With jQuery to stop/remove existing "click" delegated event that interfere with your own custom click event, you could try to use off(), which is likely the contrary of on().

So with your code it should be: 

jQuery(function($){
    $(document.body).off('click', 'a');

    $("li").on("click", "a", function(event) {
        var _href = $(this).attr("href");
        history.pushState(null, null, _href);
        fadeTransition(_href);
    });
});

It could solve your issue.

Upvotes: 1

Related Questions