Question

使用该站点上提供的最简单示例，使用bootstrap-slider（http://www.eyecon.ro/bootstrap-slider/）工作没有问题。但是，我打算在bootstrap popover中使用一个作为更多扩展设置的一部分。我能想到的最简单的例子是：

    <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>

如您所见，如果您尝试加载此功能，则无效。滑块呈现正确，但无法与之交互，不显示工具提示等。

弹出窗口内部和外部的滑块组件生成的html之间的差异显示它们是相同的，所以我无法理解持久性。任何人都有这个特殊问题的经验吗？

Answer 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/

修改

我知道，我认为是因为popover会重新启动其内容，您可以像使用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/

在Popover中使用Bootstrap-Slider

1 个答案:

修改