Javascript JQuery UI滑块显示但不显示'；t在第一次单击后不响应事件

我设置了三个滑块。一个是范围，另外两个是规则的。滑块在页面上呈现，但在第一次单击时，它们会转到“最小”或“最大”。之后，它们似乎被卡住了。将console.log添加到事件处理程序表明，在第一次单击之后，它们不再响应任何事件。也没有控制台错误。我不知道如何调试这个。我还能试什么

<script type='text/javascript'>
  jQuery(function($) {
    $(".slide-container").each(function(i, v) {
        $(v).children(".slide").slider({
            range: "min",
            animate: true,
            min: $(v).children(".min").html(),
            max: $(v).children(".max").html(),
            value: $(v).children(".value").html(),
            slide: function(event, ui) {
                $(v).children(".value").html(ui.value);
                true;
            }
        });
    });

    $(".range-container").each(function(i, v) {
        $(v).children(".range").slider({
            range: true,
            animate: true,
            min: $(v).children(".min").html(),
            max: $(v).children(".max").html(),
            values: [$(v).children(".min-value").html(), 
                             $(v).children(".max-value").html()],
            slide: function(event, ui) {
                $(v).children(".min-value").html(ui.values[0]);
                $(v).children(".max-value").html(ui.values[1]);
                true;
            }
        });
    });
  });
</script>

<div class='slide-container'>
  <div class='slide' id='password-strength-slide'></div>
  <div class='min'>0</div>
  <div class='max'>100</div>

  <div class='value'>80</div>
</div>
<div class='range-container'>
  <div class='range' id='password-length-range'></div>
  <div class='min'>4</div>
  <div class='max'>32</div>

  <div class='min-value'>8</div>
  <div class='max-value'>12</div>
</div>
<div class='range-container'>
  <div class='range' id='token-length-range'></div>
  <div class='min'>4</div>
  <div class='max'>16</div>

  <div class='min-value'>3</div>
  <div class='max-value'>4</div>
</div>

jQuery（函数（$）{
$（“.slide container”）。每个（函数（i，v）{
$（v）.children（“.slide”）.slider({
射程：“分钟”，
动画：对，
min:$（v）.children（“.min”）.html（），
max:$（v）.children（“.max”）.html（），
值：$（v）.children（“.value”）.html（），
幻灯片：功能（事件、用户界面）{
$（v）.children（“.value”）.html（ui.value）；
是的；
}
});
});
$（“.range容器”）。每个（函数（i，v）{
$（v）.children（“.range”）.slider({
范围：对，
动画：对，
min:$（v）.children（“.min”）.html（），
max:$（v）.children（“.max”）.html（），
值：[$（v）.children（“.min value”）.html（），
$（v）.children（“.max value”）.html（）]，
幻灯片：功能（事件、用户界面）{
$（v）.children（“.min value”）.html（ui.values[0]）；
$（v）.children（“.max value”）.html（ui.values[1]）；
是的；
}
});
});
});
0
100
80
4.
32
8.
12
4.
16
3.
4.

您的

mix

和

max

和

值

选项需要整数，它们当前正在获取字符串，因此使用

parseInt（）

如下：

$(".range-container").each(function(i, v) {
    $(v).children(".range").slider({
        range: true,
        animate: true,
        min: parseInt($(v).children(".min").html(), 10),
        max: parseInt($(v).children(".max").html(), 10),
        values: [parseInt($(v).children(".min-value").html(), 10), 
                 parseInt($(v).children(".max-value").html(), 10)],
        slide: function(event, ui) {
            $(v).children(".min-value").html(ui.values[0]);
            $(v).children(".max-value").html(ui.values[1]);
        }
    });
});

。或者减少重复的代码，通过函数或插件方法使其更有效