HTML5 范围输入值在 Bootstrap 弹出框内没有改变答案

【问题标题】：HTML5 range input value is not changing inside Bootstrap popoverHTML5 范围输入值在 Bootstrap 弹出框内没有改变
【发布时间】：2016-03-04 15:45:46
【问题描述】：

我在 bootstrap popver 中有 html5 范围输入滑块，当我更改滑块时始终获得相同的值，我可以滑动范围滑块但我无法获得更改后的值

当我的容器中没有 display:none 的相同范围滑块时，它工作得很好，所以对我来说很奇怪

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

【问题讨论】：

您正在将“volume-popover”id 的 html 克隆到您的弹出框中，因此它不会获得更新的值。

标签： javascript jquery css html twitter-bootstrap

【解决方案1】：

您的 html 克隆没有获得更新的值，您必须获得弹出框的值。尝试将以下代码更新到您的 JS 中：

 $('body').delegate(volumeBar, 'change', function(evt) {
   console.log($(".popover .volume-bar").val());
  });

还有一件事，当您将 html 克隆到 popover 中时，它会在 popover 中附加相同的 ID，您在开始时已经提供给 source div。所以总的来说，再次使用相同的 id 并不是一个好主意。所以我认为你可以参考这个小提琴，如果你觉得它适合你的要求，你可以这样使用：fiddle

【讨论】：