Disable jQuery function on a particular page

Question

I have a jQuery function which displays a lightbox pop-up:

      function flatsomeQuickView(element) {
         $(element).click(function(e){
             $(this).after('<div class="ux-loading dark"></div>');
               var product_id = $(this).attr('data-prod');
               var data = { action: 'ux_quickview', product: product_id};
                $.post(ajaxURL.ajaxurl, data, function(response) {
                 $.magnificPopup.open({
                    removalDelay: 300,
                    items: {
                      src: '<div class="product-lightbox">'+response+'</div>',
                      type: 'inline'
                    }
                  });
                   $('.ux-loading').remove();
                   $('.product-lightbox .product-gallery-slider').flickity({
                            cellAlign: "center",
                            wrapAround: true,
                            autoPlay: false,
                            prevNextButtons:true,
                            percentPosition: true,
                            imagesLoaded: true,
                            lazyLoad: 1,
                            pageDots: false,
                            rightToLeft: false
                   });
                   setTimeout(function() {

                        // Run Variations Form Scripts
                        if ($('.product-lightbox form').hasClass('variations_form')) {
                          $('.product-lightbox form.variations_form').wc_variation_form();
                        }

                        $(".product-lightbox form.variations_form").on( "show_variation", function (event, variation) {
                          if(variation.image_src){
                            $('.product-lightbox .product-gallery-slider .slide.first img').attr('src',variation.image_src);
                            $('.product-lightbox .product-gallery-slider .slide.first a').attr('href',variation.image_link);
                            $('.product-lightbox .product-gallery-slider').flickity( 'select', 0);
                          }
                        });

                        // Create QTY Buttons
                        $('.product-lightbox').addQty();

                  }, 600);
                });

                e.preventDefault();
            }); // product lightbox
      }
  flatsomeQuickView('.quick-view');

which I don't want to execute on a home page (Wordpress site). For that I have created a WP action in the functions.php file

function quick_view_override() {

global $myvar;

if($myvar == 'home') {
echo <<<EOT
<script>
function flatsomeQuickView(element) {
    $(element).click(false);
}
</script>
EOT;
}
}

add_action( 'wp_footer', 'quick_view_override', 100 );

but somehow .click() is not disabled for flatsomeQuickView function.

RwwL · Accepted Answer · 2016-06-08 15:46:41Z

1

jQuery's click (a shortcut for .on) does not take a boolean (see docs).

Use $(element).off('click'); if you're OK with disabling all click handlers on that element.

answered Jun 8, 2016 at 15:46

RwwL

3,3081 gold badge25 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

JackTheKnife Over a year ago

I have updated code to $(element).off('click'); and my override code comes just under original function but still is not working (original function kicks in).

RwwL Over a year ago

You don't need redefine flatsomeQuickView in your override code, it's kind of pointless in that case because you've already defined it and called it. You could've just called $(element).off('click');

RwwL Over a year ago

Another very simple way of doing this would have been to use your if $myvar == 'home' logic to put a custom class on the html or body element, then in your original code just surround the original call to flatsomeQuickView with if ($('.homepageClass').length){ ... }

JackTheKnife · Accepted Answer · 2016-06-08 16:10:27Z

0

Got it to work based on RwwL answer but the final code is much more complex:

function quick_view_override() {

global $myvar;

if($myvar == 'home') {
echo <<<EOT
<script>
function flatsomeQuickView(element) {
    jQuery(element).off('click');
}

flatsomeQuickView('.quick-view');

  jQuery('.woocommerce').arrive(".quick-view", function() {
    flatsomeQuickView(jQuery(this));
   });


</script>
EOT;
}
}

add_action( 'wp_footer', 'quick_view_override', 100 );

answered Jun 8, 2016 at 16:10

JackTheKnife

4,2349 gold badges73 silver badges138 bronze badges

Collectives™ on Stack Overflow

Disable jQuery function on a particular page

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related