3

使用该站点上提供的最简单示例，我在使用 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>

如您所见，如果您尝试加载它，它不起作用。滑块渲染正确，但无法交互，没有出现工具提示等。

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

4

1 回答 1

3

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

代码：

 $(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/

于 2013-09-12T21:03:16.527 回答