Javascript HTML5范围输入值在Bootstrap popover中没有更改

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

当我在同一个范围滑块的容器中没有显示：无时，它工作得很好，我很惊讶

HTML:

---

Fiddle:

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

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

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

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

$(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());
        });
});

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