Question

我想加载一个包含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();
}

Answer 1

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

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

Answer 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 ) {
                                ...
                            }

                        });
                    }

                }); 
            });

动态jQuery滑块不显示

2 个答案: