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

Question

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

当我的容器中有相同的范围 slider 但没有 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());
        });
});

fiddle :Updated fiddle

Answer 1

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

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

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