1

フレックススライダーに問題があります。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>

解決策はありますか？

4

1 に答える 1

0

タグにonclickを書く代わりに、disのようにリンクするクラスまたはIDを指定します

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

次に、ドキュメントの準備ができた関数で、クリックイベントをこのリンクにバインドします

$('#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();

});

この助けを願っています

于 2013-06-20T11:42:56.387 に答える