Question

在页面上，当用户填写搜索框时，我添加了一个搜索结果div，其中包含克隆的行（withDataAndEvents = true）和jQuery。其中一些行包含表单元素，一些包含jQuery UI滑块。这些元素的事件与knockoutJS的数据绑定功能绑定。常规表单元素上的事件处理程序工作正常，但不适用于jQuery UI滑块。拖动手柄时，它会跳回原始行。

一些代码：

$(divselector).each(function (i, div) {
     if (arrPropertyGuids.indexOf($(div).attr("data-propertyguid")) == -1) {
         $("#propertiesSearchPanel").append($(div).clone(true).show());
     }
 });

我遍历一些div（行）并将它们逐个添加到结果面板中，通过克隆它们（也尝试深度克隆没有区别）。一些div隐藏在源代码中，因此我需要调用.show（）。

我做了什么尝试：

试图重新启动滑块。但没有发现不同的行为。
尝试在克隆后销毁并初始化滑块，但这会出错：

在初始化之前无法调用滑块上的方法;试图调用方法'destroy'

 $(".range-slider").slider("destroy");

所以，在我看来，克隆滑块不是一种“真正的”jQuery UI滑块，但仍然链接到原始元素。

任何人都知道如何解决这个问题？

Answer 1

我有一个有效的解决方案，但不是理想的解决方案。所以我打开这个问题以防万一有人可能有更好的答案。

我只删除了所有滑块，然后重新添加了div标签。之后，我重新应用了jQuery UI滑块初始化函数。

 $("#propertiesSearchPanel").find(".range-slider").remove();
        $("#propertiesSearchPanel .range-box").each(function (i, tb) {
           $(tb).next("label").after('<div class="range-slider"></div>');
        }
 });
 sliders($("#propertiesSearchPanel")); //init functions for sliders

jQuery clone jQueryUI滑块奇怪的行为

1 个答案: