2013-03-14 4 views
1

У вас возникли проблемы с flexslider. Он отлично работает, когда я открываю html-страницу, но когда я нажимаю кнопку изменения и хочу динамически изменять содержимое страницы, она больше не работает должным образом. Как решить эту проблему?Jquerymobile Flexslider

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> 

Есть ли у вас какие-либо решения?

ответ

0

вместо того, чтобы писать OnClick в теге дать класс или идентификатор для связи как Дис

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

то в случае doucment готов функция привязки клик по этой ссылке как этот

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

}); 

надеюсь, что это помощь

+0

Большое спасибо, я удалил jqm из моего проекта – LSSESA