CODEWITHSUNDEEP
javascriptjquery
Svedr
Svedr

Reputation: 589

Trouble with jQuery events and function triggers

Let me explain what the trouble is. I have two functions: compute(); and discount_compute();. When the page firsts load both functions get executed once (OK, since discount_compute() is part of compute so it always runs when compute() is executing). When I open the #autobid-panel (it is set on display:none initially) the function discount_compute runs 1 time because of the $('#autobid').on('click', function(), but then it also runs 2 more times because of the '[data-slider]').on('change.fndtn.slider'). Btw everytime this autobid-panel is closed or opened the slider is initialized again. I only want the discount_compute() to run once when #autobid-panel is opened. Any ideas?

function compute() {
//first function
};

function discount_compute() {
//second function
};

$(document).ready(function($) {

   $('.price').change(compute).change();

   $('#autobid').on('click', function() {
     if ($(this).is(':checked')) {
          $('#autobid-panel').removeClass("hide");
          $(document).foundation('slider', 'reflow');
            discount_compute();
        } else {
          $('#autobid-panel').addClass("hide");
          $(document).foundation('slider', 'reflow');
        }
   });

   $('#discount').on('change', function(){
     var value = $(this).val();
     $('.range-slider').foundation('slider', 'set_value', value);
     discount_compute();
   });

   $('[data-slider]').on('change.fndtn.slider', function(){
     discount_compute();
   });

});

Thank your for your help!

Upvotes: 2

Views: 48

Answers (2)

BenG
BenG

Reputation: 15154

unfortunately $(document).foundation('slider', 'reflow'); fires a change event, so there isn't any nice way.

one way is to off the event before reflow and on straight after:-

function compute() {
//first function
};

function discount_compute() {
//second function
};

$(document).ready(function($) {

   $('.price').change(compute).change();

   $('#autobid').on('click', function() {
     if ($(this).is(':checked')) {
          $('#autobid-panel').removeClass("hide");
          $('[data-slider]').off('change.fndtn.slider', discount_compute);
          $(document).foundation('slider', 'reflow');
          $('[data-slider]').on('change.fndtn.slider', discount_compute);
            discount_compute();
        } else {
          $('#autobid-panel').addClass("hide");
          $(document).foundation('slider', 'reflow');
        }
   });

   $('#discount').on('change', function(){
     var value = $(this).val();
     $('.range-slider').foundation('slider', 'set_value', value);
     discount_compute();
   });

});

Upvotes: 1

JonH
JonH

Reputation: 33143

You don't really explain the reasoning of the data-slider or why you even call discount_compute(); there if you don't want to run it.

One dirty hack you can do is something to this effect:

function compute() {
//first function
};

function discount_compute() {
//second function
};

var harRun=false;
$(document).ready(function($) {
   $('.price').change(compute).change();

   $('#autobid').on('click', function() {
     if ($(this).is(':checked')) {
          $('#autobid-panel').removeClass("hide");
          $(document).foundation('slider', 'reflow');
            if(hasRun != true) {discount_compute(); hasRun=true;}
        } else {
          $('#autobid-panel').addClass("hide");
          $(document).foundation('slider', 'reflow');
        }
   });

   $('#discount').on('change', function(){
     var value = $(this).val();
     $('.range-slider').foundation('slider', 'set_value', value);
     discount_compute();
   });

   $('[data-slider]').on('change.fndtn.slider', function(){
     if(hasRun != true) {discount_compute();}
   });
});

In this way, once hasRun is set to true you no longer call discount_compute().

Upvotes: 1

Related Questions