JQuery UI滑塊顯示但在第一次點擊後不響應事件

Question

我設置了三個滑塊。一個是一個範圍，另外兩個是常規的。滑塊在頁面上呈現，但首先點擊它們可以選擇最小或最大。之後，他們似乎被卡住了。將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> 

Answer 1

你mixmax和values選擇期望整數，他們目前得到的字符串，所以使用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]); 
     } 
    }); 
}); 

You can see the updated/working version here。或者減少重複代碼，並使用函數like this或插件方法like this更高效。