0

I just started developing an application for Samsung Gear S3 using tizen web but i'm stuck with couple of issues. The problem i am facing now is pretty strange. In following code, there are couple of items display in listview so whenever i try to click on item in list view, the click doesn't trigger in Emulator, however, it works fine in browser. I'm not sure what i am doing here.

Here is javascript code snippet that being triggered whenever use click on item

<script type="text/javascript">
        $('#dynamicList li').click(function(){
            //console.log($(this).attr('data-value'));
            alert($(this).attr('data-value'));    // this will alert data-value value.

         });
    </script>

Complete Code Snippet

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <title>Macy's MyStore app</title>
    <link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
    <link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="lib/tau/wearable/theme/default/tau.circle.min.css">
    <!-- load theme file for your application -->
    <link rel="stylesheet" href="css/style.css">
        <script type="text/javascript" src="lib/tau/wearable/js/tau.min.js"></script>
    <script src="app.js"></script>
    <script src="lowBatteryCheck.js"></script>


     <script src="js/jquery.min.js" type="text/javascript"></script>
     <script src="js/jquery.js" type="text/javascript"></script>

    <script src="js/orderProcesing.js" type="text/javascript"></script>  
</head>
<script type="text/javascript">
    $('#dynamicList li').click(function(){
        //console.log($(this).attr('data-value'));
        alert($(this).attr('data-value'));    // this will alert data-value value.

     });
</script>
<body>
    <div class="ui-page ui-page-active" id="main">
        <header class="ui-header">
            <h3 class="ui-title">Open Fulfillment Order</h3>
        </header>

         <div class="ui-content" id="ordersWidget">

            <ul class="ui-listview" id="dynamicList">
               <li> 
                  <a href="#" data-value="S">1line</a>
               </li>
               <li> 
                  <a href="#" data-value="M">2line</a>
               </li>
               <li> 
                  <a href="#" data-value="L">3line</a>
               </li>
               <li> 
                  <a href="#" data-value="S1">4line</a>
               </li>
               <li> 
                  <a href="#" data-value="S2">5line</a>
               </li>
            </ul>


          </div>

        <footer class="ui-footer ui-bottom-button">
             <a href="#" class="ui-btn">Logo</a>
   </footer>
    </div>


</body>
</html>

Any idea?

4

1 回答 1

0

You dont wait in your javascript until page load is completed so 

 //Adds click handler to #dynamicList li that are currently in the dom.
 $('#dynamicList li').click(function(){
    //console.log($(this).attr('data-value'));
    alert($(this).attr('data-value'));    // this will alert data-value value.
 });

Is already executed before the dom is even loaded in. So non of the items in the dom below this code will have this click handler.

you should encapsulate your code in a document ready callback:

$( document ).ready(function() { //dom is now loaded in.
    $('#dynamicList li').click(function(){
        //console.log($(this).attr('data-value'));
        alert($(this).attr('data-value'));    // this will alert data-value value.
    });
});
于 2017-03-15T07:36:48.150 回答