找到你要的答案

Q:jssor slider is not working when I create dynamic element replace the static element

Q:jssor滑块不工作当我创建动态元素替换静态元素

If the element is static jssor slider works perfect, but if I remove the static elements and create the element by jquery , it will not work

any hints will be appreciated

html element like this

<div class="container" id="slider1_container">
                    <div u="slides" class="slider" id="slider2_container">
                        <!-- Slide -->
                        <div>
                            <a href="#"><img u="image" src="./img/landscape/01.jpg"></a>
                            <div u="caption" t="MCLIP|B" class="caption_1">
                                <div class="caption_2">
                                </div>
                                <div class="caption_3">
                                   this is one
                                </div>
                            </div>
                        </div>
                        <!-- Slide -->
                        <div>
                            <img u="image" src="./img/landscape/04.jpg">
                            <div u="caption" t="MCLIP|B" class="caption_1">
                                <div class="caption_2">
                                </div>
                                <div class="caption_3">
                                    this is two
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

js code:

function pic_news_load(){
var picnews='';
$.jsonP({
    url:serverURL+'/appapi.php?a=getpicnews&callback=?',
    success:function(data){
        var jsondata=data.result;
        for(var i=0;i<jsondata.length;i++){
            picnews+='<div><a href="#forum_content"    onclick="setItem(\'thread_content_tid\','+jsondata[i].tid+')"><img u="image" src="'+jsondata[i].imgurl+'" ></a>';
            picnews+='<div u="caption" t="MCLIP|B" class="caption_1"><div class="caption_2"></div><div class="caption_3">'+jsondata[i].title+'</div></div></div>';
        }

        picnews=picnews+'</div></div>';
        $("#slider2_container").text('');
        $("#slider2_container").append(picnews);
        var jssor_slider1 = new $JssorSlider$("slider1_container", options); 

    }

}); 

}

如果元素是静态的jssor滑块运行完美,但是如果我删除静态要素和jQuery创建元素,它将无法工作

任何提示将不胜感激

这样的HTML元素

<div class="container" id="slider1_container">
                    <div u="slides" class="slider" id="slider2_container">
                        <!-- Slide -->
                        <div>
                            <a href="#"><img u="image" src="./img/landscape/01.jpg"></a>
                            <div u="caption" t="MCLIP|B" class="caption_1">
                                <div class="caption_2">
                                </div>
                                <div class="caption_3">
                                   this is one
                                </div>
                            </div>
                        </div>
                        <!-- Slide -->
                        <div>
                            <img u="image" src="./img/landscape/04.jpg">
                            <div u="caption" t="MCLIP|B" class="caption_1">
                                <div class="caption_2">
                                </div>
                                <div class="caption_3">
                                    this is two
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

JS代码:

function pic_news_load(){
var picnews='';
$.jsonP({
    url:serverURL+'/appapi.php?a=getpicnews&callback=?',
    success:function(data){
        var jsondata=data.result;
        for(var i=0;i<jsondata.length;i++){
            picnews+='<div><a href="#forum_content"    onclick="setItem(\'thread_content_tid\','+jsondata[i].tid+')"><img u="image" src="'+jsondata[i].imgurl+'" ></a>';
            picnews+='<div u="caption" t="MCLIP|B" class="caption_1"><div class="caption_2"></div><div class="caption_3">'+jsondata[i].title+'</div></div></div>';
        }

        picnews=picnews+'</div></div>';
        $("#slider2_container").text('');
        $("#slider2_container").append(picnews);
        var jssor_slider1 = new $JssorSlider$("slider1_container", options); 

    }

}); 

}

jquery  slider  jssor