Question

我正在尝试将此代码用于rails：

$(elem).popover({
  title:"Brake activity",
  content: $("<div>").append( $("#slider").slider({ 
    range: "max",
    max: maxValue,
    min: maxValue / 5,
    value: maxValue / 2}) ).eq(0).outerHTML(),
  trigger: "manual"});

几乎一切都很顺利，但滑块不起作用 - 它似乎被禁用了。即使我将禁用的选项定义为false，我也得到了相同的结果。 outerHTML（）方法是从Get selected element's outer HTML中提取的。

我上传了一个屏幕截图，显示了滑块的显示方式：http://i48.tinypic.com/24azpkm.png

Answer 1

可能出现的问题

首先，在弹出窗口中呈现时，您分配给content属性的任何值都将包含在<p>元素中。我怀疑可能会出现滑块问题。

第二，与其他Bootstrap组件（例如Modal）不同，Popover中的内容不是持久性的，而是在运行时呈现。因此，根据您迄今为止指示的方式，您将有一个问题能够在滑块中保留值。

解决方案

一种可能的方法是在显示或隐藏弹出窗口时附加和分离内容（在本例中为滑块）。不幸的是，Popovers不会触发事件，所以你必须手动管理它。

首先实例化您将使用的滑块，并将其保留在您将处理弹出窗口切换的范围内：

var $slider = $('<div>').slider({
  range: "max",
  max: maxValue,
  min: maxValue / 5,
  value: maxValue / 2
});

显示弹出窗口后，您可以使用以下方法附加滑块：

$('.popover-content')
  .empty()
  .append($slider);

_{注意：如果您一次打开多个弹出窗口，则必须使用更具体的选择器。}

在隐藏弹出窗口之前，您将手动分离滑块：

$slider.detach();

这将把它从DOM中删除，但它的所有数据都会持续存在。

我做了一个演示，使用切换按钮来触发弹出窗口。请注意，弹出窗口首先被初始化（未显示），没有给出内容 的初始值。

在Bootstrap popover中嵌入jQuery滑块

1 个答案:

可能出现的问题

解决方案

JSFiddle