将一个jQuery滑块绑定到DOM元素上

Question

将一个jQuery滑块绑定到DOM元素上

4

我的网页中有一个jquery UI滑块在ajax部分中。如果我使用ajax重新加载此部分，则滑块会消失。我猜我需要将滑块附加到DOM上，但似乎它需要像以下这样的事件来附加：

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

但我不知道需要附加哪种类型的事件？

谢谢

当前的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>

- krifur

“sizes” 是指什么？请添加更多的 HTML 代码，您的滑块代码并更清楚地解释问题。这是一个非常模糊的问题。 - Rachel Gallen

2

您的示例似乎不包含任何AJAX。请澄清您所说的“使用ajax重新加载此部分”的意思。请提供一个最小、完整和可验证的示例：https://stackoverflow.com/help/mcve - Twisty

1

也许你想要的是ajax的成功或完成事件。我猜测。请参见https://api.jquery.com/Ajax_Events/。 - Clxy

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hooman Bahreini · Accepted Answer

如果我在网页的 ajax 部分重新加载，就会出现一个 jQuery UI 滑块消失的问题。

你是否在 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);
        }
    });
}