6

我正在尝试将此代码用于 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"});

几乎一切正常，但滑块不起作用——它似乎被禁用了。即使我将选项 disabled 定义为 false，我也得到了相同的结果。方法 outerHTML() 是从Get selected element's external HTML中提取的。

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

4

1 回答 1

7

可能的问题

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

其次，与其他 Bootstrap 组件（如 Modal）不同，Popover 中的内容不是持久的，而是动态渲染的。因此，鉴于您迄今为止所指出的方式，您将无法在滑块中保留值。

一个解法

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

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

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

显示弹出框后，您可以立即使用以下方法附加滑块：

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

注意：如果您同时打开多个弹出框，则必须使用更具体的选择器。

在隐藏 popover 之前，您将手动分离滑块：

$slider.detach();

这会将它从 DOM 中移除，但它的所有数据都将保留。

我做了一个演示，使用切换按钮触发弹出窗口。请注意，弹出框首先被初始化（未显示），并且没有为content提供初始值。

JSFiddle

于 2012-08-12T18:42:38.607 回答