让 Bootstrap-Slider 在 Popover 中工作答案

【问题标题】：Get Bootstrap-Slider working inside Popover让 Bootstrap-Slider 在 Popover 中工作
【发布时间】：2013-09-12 19:00:48
【问题描述】：

使用该站点上提供的最简单示例，我在使用 bootstrap-slider (http://www.eyecon.ro/bootstrap-slider/) 工作时没有问题。但是，我打算在引导弹出窗口中使用一个作为更扩展设置集的一部分。我能想到的最简单的例子在这里：

    <html> 
    <head>
     <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/slider.css">


     <script src="js/vendor/jquery-1.9.1.js"></script>
     <script src="js/vendor/less-1.4.1.min.js"></script>
     <script src="js/vendor/bootstrap.js"></script>
     <script src="js/vendor/bootstrap-slider.js"></script>

     <script>
     $(function () {
          $('#rangeSlider').slider({
              formater: function(value) {
                return 'Current value: '+value;
              tooltip: 'show';
              }
     });

          $("#popoverbutton").popover({
                               html: true,
                               placement: 'bottom',
                               title: 'Options',
                               content: function(){
                                            return $("#popover-content").html();
                                        }});


           });
     </script>
     </head>

     <body>
     <h4> This is a test! </h4>
     <div class="row">
      <a href="#" id="popoverbutton" class="btn btn-inverse" rel="popover"><i class="icon-cog  icon-white"></i></a>
        </div>
     <div id="popover-content" class="hide">
         <div class="well"> Range: <input type="text" class="span2"      value="50"id="rangeSlider" data-slider-min="10" data-slider-max="100" data-slider-step="5" data-slider-value="50">
   </div>
        </div>
     </body> 
     </html>

如您所见，如果您尝试加载此文件，则它不起作用。滑块渲染正确，但无法交互，没有出现tooltip等。

为弹出窗口内部和外部的滑块组件生成的 html 之间的差异表明它们是相同的，所以我无法理解这个问题。有没有人遇到过这个问题？

【问题讨论】：

你链接过 Jquery UI 吗？
您是否收到任何 javascript 错误？
没有错误。包含所有相关的 js 文件。

标签： javascript jquery twitter-bootstrap

【解决方案1】：

尝试在弹出框的点击函数中移动滑块定义，这样会在弹出框的静态内容渲染后触发。

代码：

 $(function () {

     $("#popoverbutton").popover({
         html: true,
         placement: 'bottom',
         title: 'Options',
         content: function () {
             return $("#popover-content").html();
         }
     }).click(function () {
         $('#rangeSlider').slider();
     });

 });

演示：http://jsfiddle.net/IrvinDominin/uTwM8/

编辑

我明白了，我认为是因为弹出框重新初始化其内容，您可以像使用 slide 事件和 setValue 方法一样手动处理它。

代码：

var sliderVal;

$(function () {

    $("#popoverbutton").popover({
        html: true,
        placement: 'bottom',
        title: 'Options',
        content: function () {
            return $("#popover-content").html();
        }
    }).click(function () {

        $('#rangeSlider').slider().on('slide', function (ev) {
            sliderVal = ev.value;
        });
        if (sliderVal) {
            $('#rangeSlider').slider('setValue', sliderVal)
        }
    });

});

演示：http://jsfiddle.net/IrvinDominin/uTwM8/2/

【讨论】：

好的，很酷。每次再次隐藏弹出窗口时，该值都会消失，我有点沮丧。我尝试定义一个 $slider 变量来捕获滑块实例化并在 click() 方法中替换 #popover-content 中的 html，但这不起作用。我试图了解这些事情发生的顺序，并且恰好在某一时刻我可以保存滑块，以便我可以分离（）它以保持值。
添加了解决方法，我找不到任何替代解决方案（目前）
这基本上就是我昨天最终做的事情。我接受作为答案。