Question

我有一些引导程序弹出窗口，其中一些有jqueryui滑块作为引导程序弹出窗口的内容，并且该滑块不起作用

小提琴 https://jsfiddle.net/yasirhaleem/43qfkjtb/

$( document ).ready(function() {

  $('.triggerOverlay').popover({ 
    html : true,
    content: function() {
      var $this = $(this);
      var cont = $this.data('toggle');
      return $('#'+cont).html();
    },
    trigger: 'manual'
  }).click(function() {
    $('.slider').slider();
});


  $(document).on('click', function (e) {
    // always hide them all.
  var popov = $(".popover");
    if (!popov.is(e.target) && popov.has(e.target).length==0 ){
            $('.triggerOverlay').popover('hide');
    }    // if e.target has a popover toggle it.
    if ($(e.target).hasClass('triggerOverlay')) {
      $(e.target).popover('toggle');
    }
  });
    $( "#slider" ).slider();
});

Answer 1

发现我的问题的解决方案发布回复我自己的问题希望它对其他人有帮助。

如果有人有更好的解决方案，请在评论中发帖或建议。

这里是小提琴https://jsfiddle.net/yasirhaleem/s1ytug1c/

这个小提琴http://jsfiddle.net/mmfansler/5kuB8/9/对我没有帮助我有不同的schenario，我的html已经生成我使用不同的popover解决方案而且我们决定使用bootstrap popover我们遇到了这个问题。

我需要的只是一个回调函数，代码扩展了popover并添加了回调函数

扩展popover

var tmp = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function() {
    tmp.call(this); if (this.options.callback) {
        this.options.callback();
    }
}

Popover Call

$('.triggerOverlay').popover({ 
html : true,
callback: function () {
            $('.slider').slider();
},
content: function() {
  var $this = $(this);
  var cont = $this.data('toggle');
  return $('#'+cont).html();
},
trigger: 'manual'

}）;

<强> HTML

  <a href="#" data-toggle="user-profile-overlay" class="triggerOverlay">button</a><br><br><br><br><br>
<div id="user-profile-overlay" class="customoverlay">content goes here<div class="slider"></div>
</div>

jqueryui滑块在bootstrap popover中不起作用

1 个答案: