Question

flexslider有问题。当我打开html页面时它工作正常，但是当我点击更改按钮并想要动态更改页面内容时，它就不再正常工作了。如何解决这个问题？

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta content="charset=utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/>
        <link type="text/css" rel="stylesheet" href="../css/bi.css" />
        <link type="text/css" rel="stylesheet" href="../css/jquery.mobile-1.2.0.css" />
        <link type="text/css" rel="stylesheet" href="../css/jquery.mobile.simpledialog.css" />
        <link type="text/css" rel="stylesheet" href="../css/flexslider.css" />

        <script type="text/javascript" src="../cordova-2.2.0.js"></script>
        <script type="text/javascript" src="../js/lib/jquery.js"></script>
        <script type="text/javascript" src="../js/lib/jquery.mobile-1.2.0.js"></script>
        <script type="text/javascript" src="../js/plugin/jquery.flexslider.js"></script>

        <script type="text/javascript">
            $(document).ready(function(){               
                              $('.flexslider').flexslider({ animation: 'slide' });
                              });
        </script>
    </head>
    <body>
        <div data-role="page">
            <div data-role="header" data-theme="c">
                <h1>test</h1>
                <a data-theme="c" data-icon="false" href="#" onclick="resetPage()">change</a>
            </div>
            <div data-role="content" id="div_newportalcontent">
                <div class="flexslider">
                    <ul class="slides" id="ul_newportals">
                        <li>
                            <img id="p1"  align="center" src="p1.png" />
                        </li>
                         <li>
                            <img id="p2"  align="center" src="p2.png" />
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>

JS

<script>
    function resetPage(){
        var str='';
        $("#ul_newportals").empty();
        for(var i=3;i<6;i++){
         str+='<li><img align="center" src="p'+i+'.png" /></li>';
      }
        $("#ul_newportals").append(str);
        //$("#ul_newportals").refresh();
    }
</script>

你有解决方案吗？

Answer 1

而不是在标签中写入onclick给出类或id来链接，如dis

<a data-theme="c" data-icon="false" href="#" id="change">change</a>

然后在doucment ready函数中将click事件绑定到此链接

$('#change').bind('click',function(){
          var str='';
        $("#ul_newportals").empty();
        for(var i=3;i<6;i++){
         str+='<li><img align="center" src="p'+i+'.png" /></li>';
      }
        $("#ul_newportals").append(str);
        //$("#ul_newportals").refresh();

});

希望这个帮助

Jquerymobile Flexslider

1 个答案: