HTML5範圍輸入值在Bootstrap彈出窗口內沒有變化

我有HTML5範圍輸入滑塊在引導彈出窗口內，當我更改滑動器始終獲得相同的值時，我可以滑動範圍滑塊但我無法獲取改變的值HTML5範圍輸入值在Bootstrap彈出窗口內沒有變化

時，我有沒有display:none相同範圍滑塊在其容器的工作很好，所以weired我

HTML：

<div id="volume-popover" style="display:none;"> 
    <input type="range" id="volume-bar" class="volume-bar" step="0.1" value="5" style="display:block;"> 
</div> 

<div class="volume-up">     
<button type="button" class="btn btn-default volume-btn" data-toggle="popover">Hello</button> 
</div>

JS：

$(function() { 
    var volumeBar = $("#volume-bar"); 
    var popOverSettings_volume = { 
     placement: 'bottom', 
     container: '.volume-up', 
     html: true, 
     trigger: "manual", 
     selector: '.volume-btn', 
     content: function() { 
     return $('#volume-popover').html(); 
    } 
    } 

    $('.volume-btn').popover(popOverSettings_volume).on("mouseenter", function() { 
     var _this = this; 
     $(this).popover("show"); 
     $(this).siblings(".popover").on("mouseleave", function() { 
      $(_this).popover('hide'); 
     }); 
    }).on("mouseleave", function() { 
     var _this = this; 
     setTimeout(function() { 
      if (!$(".popover:hover").length) { 
       $(_this).popover("hide") 
      } 
     }, 100); 
     }); 

    $('body').delegate(volumeBar, 'change', function() { 
      console.log(volumeBar.val()); 
     }); 
});

小提琴：Updated fiddle

來源

2016-03-04 Jothi Kannan

你是克隆「彈出窗口」id的HTML到你的popover，所以它不會得到更新值。 – Nimmi