1

我正在使用这个 jquery jslider 插件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(
   "<?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,
   });
}
4

1 回答 1

2

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

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

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

于 2012-10-18T09:48:30.843 回答