Question

我正在添加一个div以编程方式用作滑块，但是当我将滑块应用于它时，一切都会出现，但是我无法拖动手柄，也没有任何悬停状态正常工作。

var container = $('<div class="container"></div>');
var slider_div = $('<div class="position_slider"></div>');

$(slider_div).slider();

container.append(slider_div);
$placeholder = $("#"+player_id);
$placeholder.append(container);

我已经尝试了添加滑块div的所有数量的组合无济于事，我只是想知道是否有一些我不知道的事情我错过了。物理地向页面添加<div class="position_slider">会使滑块工作，但这不是一个选项。

Answer 1

问题与 jquery.flash 在实例化滑块后更改容器DIV有关。我只是从构建滑块更改顺序，添加到容器，插入flash 到 构建滑块，插入flash，附加滑块 。

如果您遇到麻烦，您可以看到滑块和所有ui组件，但无法操作它，请尝试从页面中删除除完成滑块所需的所有其他jquery，然后将它们一个一个地添加回去，直到你发现了gremlin。

Answer 2

我认为这将清楚这应该是什么样的：

var container = '<div class="container"></div>';
var slider_div = '<div class="position_slider"></div>';

$("#"+player_id).append(container);
$(".container").append(slider_div);
$(".position_slider").slider();

我意识到您可能希望每页创建许多滑块，因此可以进行编程访问，为此，我将更改类引用的类引用，并使用某种计数器为控件创建增量ID。我会把实际的实施作为练习留给你。

Answer 3

对于其他发现此页面的人，我遇到了类似的问题。

这会产生一个看起来很好但不能操作的滑块。

var mySlider = $("<div/>").slider();
$(mySlider).clone().appendTo(SomeDiv);

使用slider()注册新滑块解决了问题。

var mySlider = $("<div/>").slider();
$(mySlider).clone().slider().appendTo(SomeDiv);

以编程方式添加jQuery UI Sliders导致问题

3 个答案: