javascript - jqueryui slider 在 bootstrap 弹出窗口内不起作用

Question

我有许多 bootstrap popover，其中一些有 jqueryui slider 作为 bootstrap popover 的内容，但该 slider 不起作用

fiddle 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

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

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

这是 fiddle https://jsfiddle.net/yasirhaleem/s1ytug1c/

这个 fiddle http://jsfiddle.net/mmfansler/5kuB8/9/对我没有帮助，我有不同的方案，我的html已经生成了，我正在使用不同的弹出窗口解决方案，然后我们决定使用引导弹出窗口，然后我们遇到了这个问题。

我需要的只是下面代码中的回调函数扩展弹出窗口并添加回调函数

扩展弹出框

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

弹出窗口调用

$('.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>