1

Have a problem with flexslider. It works fine when I open the html page, but when I click on the change button and want to dynamically change the content of the page, it no longer work properly. How to solve this problem?

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>

Do you have any solutions?

4

1 回答 1

0

而不是在标签中写 onclick 给一个类或 id 来链接像 dis

<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 回答