Question

在我的项目中，我正在使用Bootstrap-Slider在容器DIV上创建范围滑块。因为我使用的是动态Ajax内容，所以我需要替换包含滑块输入组件的DIV内容。因此，内容将替换并在之后重建后退按钮（这是使用pushstate和popstate的HTML 5历史记录行为，但此处不重要）。

发生替换内容时，滑块组件冻结的情况。从我的测试看来，滑块丢失了本机事件，从而将其绑定。事件侦听器mouseenter，mouseleave和替换内容后，缺少mousedown和鼠标右键。

之前（使用折叠菜单组件时），我已经遇到了此问题，并解决了将事件侦听器委派给DOM文档的问题，如下所示。

$(document).on('click','.#menu_collapsed', {} ,function(e){
...
})

似乎可以处理DOM本机事件，但不适用于滑块组件的自定义事件（slideStop，slide，slideStart等）。

替换后，我可以看到该组件在那里，但是没有响应。因此，我认为更换后重新初始化滑块组件应该可以解决它。因此，我在选择器输入标签上使用了slide（）函数。看起来很明显，但是它已经在屏幕上生成了一个新的组件实例，该组件呈现了我的副本。

我还用原始标签替换了内容，其工作方式如下。可以，因为所有进程都已重新初始化。

但是当我替换为动态生成的原始html滑块时，它没有用。

<!-- below is generated slider html generated on the fly --->
<div class="slider slider-horizontal" style="width: 220px;">
    <div class="slider-track">
    <div class="slider-selection" style="left: 0%; width: 44.4444%;"></div>
    <div class="slider-handle round" style="left: 44.4444%;"></div>
    <div class="slider-handle round hide" style="left: 0%;"></div>
</div>
<div class="tooltip top" style="top: -40px; left: 50.7778px;">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">Current value: 5</div></div>
    <input type="text" id="sl1" class="col-md-12" value="1" data-slider-min="1" data-="" slider-max="20" data-slider-value="5" style="">
</div>

也许有一种解决方法来重新启动原始实例。我尝试使用[Fiddle]（http://jsfiddle.net/gildlrei/yxj9m4p8/84/）重现该行为。关于小提琴示例测试的一些解释。

在我的示例中，您可以尝试以下三个按钮。

1-首先单击“生成内容”按钮。它将生成原始的html滑块，并将其显示在底部。此外，它将用文本“ nothing here”替换容器DIV，从而擦除滑块组件。 2-单击“替换内容”按钮。它将返回原始内容并重新渲染滑块组件。此时，您可以看到滑块被冻结。
3-单击“启动Slider的新实例”按钮。它将在$（'＃sl1'）选择器上调用Slider（）函数，尝试重新初始化。此时，您可以看到两个具有新功能的组件。

谢谢您的建议。

替换内容时，引导程序滑块会丢失事件绑定

0 个答案: