动态 jQuery 滑块未出现答案

【问题标题】：Dynamic jQuery slider not appearing动态 jQuery 滑块未出现
【发布时间】：2012-11-12 17:54:37
【问题描述】：

我想加载一个带有 AJAX 调用结果的页面，这可以正常工作，但是对于每个结果，还应该有一个 jQuery 滑块。如果我创建一个静态 php 页面并显示结果，则代码可以正常工作。但是当我将结果加载到另一个页面时，滑块没有出现。它的位置有效，console.log(s) 告诉我滑块正在更新，但视觉上没有实际的滑块。

我在 Stackoverflow 上发现了一些帖子提到您需要使用 .page()，但我在 jQuery 的网站上找不到关于此的信息。

有没有人通过 AJAX 请求动态创建滑块的经验？有没有更好的方法？

滑块用于自定义音频播放器。

提前致谢。

编辑：添加代码

编辑： $('.slider').slider(); 添加

编辑：不需要响应页面

主页：

function showInfoTracks(){
    ajaxConnection.onreadystatechange = function(){
        if (ajaxConnection.readyState == 4 && ajaxConnection.status == 200) {
AJAX RESPONSE               
        }
    }
    ajaxConnection.open("GET", "file.php, true);
    ajaxConnection.send();
}

【问题讨论】：

您确实应该提供一些代码或 jsFiddle，以便我们深入研究您的问题。
我们需要查看您的代码才能提供帮助。你做的原则上是好的，正常的，所以你做错了什么。
我找到了这个link 然后我添加了这个 $('.slider').slider();到此函数的末尾 showInfoTracks 和滑块出现。滑块在那里，但滑动的功能不存在。滑块会随着音频文件的播放而移动，但您无法与之交互。

标签： jquery

【解决方案1】：

.page() 上的代码可能会导致无限循环。这就是为什么它只是继续加载日志而不给出结果的原因。

这是一个链接。 JQuery Mobile .page() function causes infinite loop?

【讨论】：

是否有非 jQuery Mobile 修复？我知道这就是 .page 的来源。感谢您的意见。
我找不到最适合这个问题的任何 jquery 和 ajax 滑块。但是，如果我要创建一个 ajax 滑块，我会使用任何滑块框架。然后，从服务器生成一个 json 文件，列出我需要的所有变量，例如：imageURL、description 和 title。然后，使用jQuery.ajax() 从该页面获取结果。然后，使用jQuery.parseJSON() 解析变量。然后在滑块的页面上通过jQuery.append()（带有我想要的布局）分配变量。

【解决方案2】：

答案最终是在 AJAX 响应部分中定义滑块。

   $(document).ready(function() {

                $(document).on('mouseenter', '.playButton', function() {    
                    var newSliderID = this.id;
//Run this if so that you dont reload the same slider over and over again
                    if($("#sliderActivated"+newSliderID).val() == 0){
                        $("#sliderActivated"+newSliderID).val(1);
                        $( "#slider"+newSliderID ).slider({ 
                            animate: true ,
                            value: 0,
                            min: 0,
                            start: function( event, ui ) {
                                ...
                            },
                            slide: function( event, ui ) {
                                ...
                            },
                            stop: function( event, ui ) {
                                ...
                            }

                        });
                    }

                }); 
            });

【讨论】：