Question

我正在使用这个jquery jslider pluggin http://egorkhmelev.github.com/jslider/，效果非常好。它基本上通过'重绘''输入'项目到滑块来工作。

文档就绪工作正常，并按预期绘制滑块，但接下来我根据用户选择使用ajax调用来更改页面上的“输入”数量，从而更改滑块的数量，但是我很难在ajax调用之后获取插件以“重绘”新输入上的滑块。

我尝试在函数initSliders（）中包装滑块调用，见下文，因此可以在ajax调用之后刷新，但它不会重绘滑块。

有什么建议吗？

插件所需位：

//在ajax之前

<div id="decide1_right">
    <input id="Sliderx" type="slider" name="area" value="20;100" />
</div>

//在ajax之后

<div id="decide1_right">
    <input id="Sliderx" type="slider" name="area" value="20;100" />
    <input id="Slidery" type="slider" name="area" value="20;100" />
</div>

// ajax post

$.post(
   "<?php echo base_url('index.php/test/getCriteriaItems');?>", 
   {criteria: row_id}, 
   function(data) {
     $("#decide1_grp").html(data);  // returns <input>'s for sliders
   }
);
initSliders();

//滑块的东西

$(document).ready(function() {
  initSliders();
});

//滑块的东西

function initSliders() {
   $("#Sliderx").slider({ 
      from: 0, 
      to: 120, 
      step: 0.1, 
      format: { format: '##.0'},
      round:1,
      scale: ['0', '20%', '40%', '60%', '80%', '100%', '120%'], 
      limits: false,
   });
   $("#Slidery").slider({ 
      from: 0, 
      to: 120, 
      step: 0.1, 
      format: { format: '##.0'},
      round:1,
      scale: ['0', '20%', '40%', '60%', '80%', '100%', '120%'], 
      limits: false,
   });
}

Answer 1

使用jquery的ajaxComplete函数..它应该在每次ajax调用后触发。

$("#Sliderx, #Slidery").ajaxComplete(function () {
   //logic here
});

http://api.jquery.com/ajaxComplete/

使用ajax更改输入后重新加载jslider

1 个答案: