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

【问题标题】：reloading jslider after using ajax to change the inputs使用ajax更改输入后重新加载jslider
【发布时间】：2012-09-25 02:15:20
【问题描述】：

我正在使用这个 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,
   });
}

【问题讨论】：

标签： jquery html ajax jslider

【解决方案1】：

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

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

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

【讨论】：