2015-04-02 22 views
0

從這一行,我試圖調用javascript函數的PhoneGap的onclick沒有得到所謂的

<a href="#" id="menu-toggle" onclick="menu_toggle()"> <i class="fa fa-align-justify fa-lg"></i></a> 

瀏覽器其工作正常,只有在的android的PhoneGap其不工作。我試過很多東西沒有什麼工作,如果我只放容器流體它不工作​​

完整代碼

<head> 

    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <title> </title> 

    <!-- Bootstrap Core CSS --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link rel="stylesheet" href="css/font-awesome.css" /> 
    <!-- Custom CSS --> 
    <link href="css/simple-sidebar.css" rel="stylesheet"> 

    <link href="assets/css/custom.css" rel="stylesheet"> 

    <!-- Owl Carousel Assets --> 
    <link href="owl-carousel/owl.carousel.css" rel="stylesheet"> 
    <link href="owl-carousel/owl.theme.css" rel="stylesheet"> 

    <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet"> 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 
<!-- Menu Toggle Script --> 
    <script> 
     console.log("menu clicked proc"); 
     function abc(){ 
       window.location.href="foo.html"; 
      } 
     **function menu_toggle() {** 
    // $("#menu-toggle").click(function(e) { 
     console.log("menu clicked"); 
     // e.preventDefault(); 
     $("#wrapper").toggleClass("toggled"); 
    //}); 
     } 
    </script> 
</head> 

<body > 

    <div id="wrapper" > 

     <!-- Sidebar --> 
     <div id="sidebar-wrapper"> 
      <ul class="sidebar-nav"> 
       <li class="sidebar-brand"> 
        <a href="#"> 
         Start Bootstrap 
        </a> 
       </li> 
       <li> 
        <a href="#">Dashboard</a> 
       </li> 
       <li> 
        <a href="#">Shortcuts</a> 
       </li> 
       <li> 
        <a href="#">Overview</a> 
       </li> 
       <li> 
        <a href="#">Events</a> 
       </li> 
       <li> 
        <a href="#">About</a> 
       </li> 
       <li> 
        <a href="#">Services</a> 
       </li> 
       <li> 
        <a href="#">Contact</a> 
       </li> 
      </ul> 
     </div> 
     <!-- /#sidebar-wrapper --> 

     <!-- Page Content --> 
     <div id="page-content-wrapper"> 

      <div class="container-fluid"> 
       <div class="row topbar"> 
        <div class="col-md-3 col-lg-3 col-sm-3 col-xs-3 text-left"> 


         **<a href="#" id="menu-toggle" onclick="menu_toggle()"> <i class="fa fa-align-justify fa-lg"></i></a>** 

        </div> 
        <div class="col-md-6 col-lg-6 col-sm-6 col-xs-6 padding-restriction "> 
        <div class="logo-top text-center"> 

<!--      <a href="#" class=" "> <img src="img/logo-white.png" alt="" ></a>--> 
         </div> 
        </div> 
        <div class="col-md-3 col-lg-3 col-sm-3 col-xs-3 text-right"> 


<!--      <a href="#" class=" "> <img src="img/cart.png" alt="" ></a>--> 

        </div> 
       </div> 

      </div> 
      <div id="demo"> 
     <div class="container"> 
      <div class="row"> 
      <div class="span12"> 
       <div id="owl-demo" class="owl-carousel"> 

       <div class="item"><img src="assets/fullimage1.jpg" alt="The Last of us"></div> 
       <div class="item"><img src="assets/fullimage2.jpg" alt="GTA V"></div> 
       <div class="item"><img src="assets/fullimage3.jpg" alt="Mirror Edge"></div> 

       </div> 
      </div> 
      </div> 
     </div> 
    </div> 
      <div id="category-home"> 
     <div class="container padding-restriction"> 
       <h4>Shop by Category</h4> 
       </div> 
       <div class="container"> 

    <div class="row " > 

     <div class="col-xs-4 padding-restriction-x5 "><div class="category-home-product"><img src="img/women_cat.jpg" alt=" "><p class="home-product-title">Women</p></div></div> 
     <div class="col-xs-4 padding-restriction-x5"><div class="category-home-product"><img src="img/men_cat.jpg" alt=" "><div class="home-product-title">Men</div></div></div> 
     <div class="col-xs-4 padding-restriction-x5 "><div class="category-home-product"><img src="img/kid_cat.jpg" alt=" "><div class="home-product-title">Kids</div></div></div> 



    </div> 
     <div class="row padding-top-x5" > 

     <div class="col-xs-4 padding-restriction-x5 "><div class="category-home-product"><img src="img/accessorie_cat.jpg" alt=" "><p class="home-product-title">Accessories</p></div></div> 
     <div class="col-xs-4 padding-restriction-x5"><div class="category-home-product"><img src="img/brands_cat.jpg" alt=" "><div class="home-product-title">Brands</div></div></div> 
     <div class="col-xs-4 padding-restriction-x5 "><div class="category-home-product"><img src="img/deals_cat.jpg" alt=" "><div class="home-product-title">Deals</div></div></div> 



    </div> 
    <div class="row " > 

     <div class="col-xs-6 padding-restriction-x5 "><h3 class="text-blue">New looks</h3></div> 
     <div class="col-xs-6 padding-restriction-x5"><h3 class="text-black">Top sellers</h3></div> 
     <div class="col-xs-6 padding-restriction-x5 "><div class="category-home-product"><img src="img/look.jpg" alt=" "> </div></div> 
     <div class="col-xs-6 padding-restriction-x5"><div class="category-home-product"><img src="img/top_sellers.jpg" alt=" "> </div></div> 
    </div> 



</div> 
      </div> 

     </div> 
     <!-- /#page-content-wrapper --> 

    </div> 
    <!-- /#wrapper --> 

    <!-- jQuery --> 
    <script src="js/jquery.js"></script> 

    <!-- Bootstrap Core JavaScript --> 
    <script src="js/bootstrap.min.js"></script> 


    <script src="assets/js/jquery-1.9.1.min.js"></script> 
    <script src="owl-carousel/owl.carousel.js"></script> 


    <!-- Demo --> 

    <style> 
    #owl-demo .item img{ 
     display: block; 
     width: 100%; 
     height: auto; 
    } 
    </style> 


    <script> 
    $(document).ready(function() { 
     console.log("owldemo"); 
     $("#owl-demo").owlCarousel({ 

     navigation : false, 
     slideSpeed : 300, 
     paginationSpeed : 400, 
     singleItem : true 

     // "singleItem:true" is a shortcut for: 
     // items : 1, 
     // itemsDesktop : false, 
     // itemsDesktopSmall : false, 
     // itemsTablet: false, 
     // itemsMobile : false 

     }); 
    }); 
    </script> 

    <script src="assets/js/bootstrap-collapse.js"></script> 
    <script src="assets/js/bootstrap-transition.js"></script> 
    <script src="assets/js/bootstrap-tab.js"></script> 

    <script src="assets/js/google-code-prettify/prettify.js"></script> 
    <script src="assets/js/application.js"></script> 

    <!-- End JavaScript Files --> 
</body> 

</html> 

回答

0

您是否嘗試過的聽衆?

document.getElementById("menu-toggle").addEventListener("click", function (e){ 
    // $("#menu-toggle").click(function(e) { 
    console.log("menu clicked"); 
    // e.preventDefault(); 
    $("#wrapper").toggleClass("toggled"); 
    //});;} 
);