简体   繁体   English

PhoneGap onclick没有被调用

[英]PhoneGap onclick not getting called

From this line I am trying to call a javascript function 从这一行,我试图调用一个javascript函数

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

Browser its working fine, only in phonegap android its not working. 浏览器工作正常,仅在phonegap android中无法工作。 I tried many things nothing is working if I put only container-fluid its not working 我尝试了很多事情,如果我只使用容器流体,那它什么都不起作用

Complete code 完整的代码

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

Have you tried listeners ? 您是否尝试过听众?

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM