将jQuery滑块绑定到dom

时间:2019-02-15 20:56:19

标签: ajax jquery-ui dom

我的网页的ajax部分有一个jquery UI滑块。如果我要用ajax重新加载此部分,则滑块会消失。我想我需要将滑块附加到DOM,但是看起来它需要将事件附加到上:

$(".radio").on("click", function () {

但是我不知道我需要在那举行什么活动?

thx

当前html:

$(function() {
  var handle = $("#custom-handle");
  $("#custom-handle").text(sizes[0].value);
  $("#slider").slider({
    create: function() {},
    min: 0,
    max: sizes.length - 1,
    step: 1,
    slide: function(event, ui) {
      handle.text(sizes[ui.value].value);
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="slider">
  <div id="custom-handle" class="ui-slider-handle"></div>
  <br>
</div>

1 个答案:

答案 0 :(得分:1)

  

我的网页的ajax部分有一个jQuery UI滑块。如果我是   用ajax重新加载此部分,滑块消失。

您要替换ajax中的滑块HTML代码吗?即您要替换此div吗?

<div id="slider">
  <div id="custom-handle" class="ui-slider-handle"></div>
  <br>
</div>

如果是这种情况,那么我认为绑定不存在问题……一旦ajax调用完成,您是否尝试过重新初始化滑块?

$.ajax({
    type: 'post',
    url: 'some url',
    success: function(data) {                       
        initializeSlider();
    }
});      

function initializeSlider() {
    $("#slider").slider({
        create: function() {},
        min: 0,
        max: sizes.length - 1,
        step: 1,
        slide: function(event, ui) {
            handle.text(sizes[ui.value].value);
        }
    });
}