jQuery 事件和函数触发器出现问题

Trouble with jQuery events and function triggers

本文关键字：问题 触发器 函数 事件 jQuery      更新时间：2023-09-26

让我解释一下问题所在。我有两个函数：compute（）; 和 discount_compute（）;。当页面第一次加载时，两个函数都会执行一次（好的，因为 discount_compute（） 是计算的一部分，所以它总是在 compute（） 执行时运行）。当我打开 #autobid 面板（最初设置为显示：无）时，由于 $（'#autobid'）.on（'click'， function（）），函数discount_compute运行 1 次，但随后由于"[数据滑块]"）.on（'change.fndtn.slider'），它也运行了 2 次。顺便说一句，每次关闭或打开此自动出价面板时，滑块都会再次初始化。我只希望 discount_compute（） 在打开 #autobid 面板时运行一次。有什么想法吗？

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();
   });
});

感谢您的帮助！

你并没有真正解释数据滑块的推理，或者如果你不想运行它，为什么你甚至在那里调用discount_compute();。

你可以做的一个肮脏的黑客是这样的：

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();}
   });
});

这样，一旦hasRun设置为 true，您就不再调用 discount_compute() 。

不幸的是，$(document).foundation('slider', 'reflow');触发了一个change事件，所以没有任何好方法。

一种方法是在reflow之前off事件，然后直接on：-

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();
   });
});
相关文章：