HTML5 范围输入值在引导弹出窗口中没有变化

HTML5 range input value is not changing inside Bootstrap popover

本文关键字：窗口 有变化 输入 范围 HTML5      更新时间：2023-09-26

>我在引导波普尔中有 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());
        });
});
小提琴

：更新的小提琴

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

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

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

相关文章：