Javascript 让引导滑块在Popover内工作_Javascript_Jquery_Twitter Bootstrap

Javascript 让引导滑块在Popover内工作

javascript jquery twitter-bootstrap

Javascript 让引导滑块在Popover内工作,javascript,jquery,twitter-bootstrap,Javascript,Jquery,Twitter Bootstrap,使用该站点提供的最简单示例，使用bootstrap slider（）工作没有问题。然而，我打算在引导式popover中使用一个，作为更扩展的设置集的一部分。我能想到的最简单的例子是： <html> <head> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="styleshee

使用该站点提供的最简单示例，使用bootstrap slider（）工作没有问题。然而，我打算在引导式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>


$（函数（）{
$（“#范围滑块”）。滑块({
格式化程序：函数（值）{
返回“当前值：”+值；
工具提示：“显示”；
}
});
$（“PopoOverButton”）.popover({
是的，
位置：'底部'，
标题：“选项”，
内容：函数（）{
返回$（“#popover内容”）.html（）；
}});
});
这是一个考验！
范围：

正如您所看到的，如果您尝试加载它，它将不起作用。滑块已正确渲染，但无法与之交互，不会显示工具提示等

弹出窗口内部和外部为滑块组件生成的html之间的差异表明它们是相同的，因此我无法理解延迟。有人有过这方面的经验吗？

请尝试在popover的单击功能中移动滑块定义，以便在popover的静态内容呈现后触发滑块定义

代码：

演示：

编辑我明白了，我想是因为popover重新发布了它的内容，你可以像使用

slide

事件和

setValue

方法一样手动处理它

代码：

演示：

您链接了Jquery UI吗？是否有javascript错误？没有错误。包括所有相关的js文件。好的，酷。每次再次隐藏弹出窗口时，该值都会消失，这让我有点沮丧。我试图定义一个$slider变量来捕获slider实例化，并在click（）方法中替换#popover内容中的html，但这不起作用。我正试图了解这些事情发生的顺序，并且在某一点上我可以保存滑块，这样我就可以分离（）它以保留值。添加了一个解决方法，我找不到任何替代解决方案（目前），这基本上就是我昨天做的。我接受这个答案。

 $(function () {

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

 });

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)
        }
    });

});