Событие клика не работает на TizenEvent

Я только начал разрабатывать приложение для Samsung Gear S3, используя tizen web, но я застрял с несколькими проблемами. Проблема, с которой я сейчас сталкиваюсь, довольно странная. В следующем коде есть несколько элементов, отображаемых в представлении списка, поэтому всякий раз, когда я пытаюсь щелкнуть по элементу в представлении списка, щелчок не срабатывает в эмуляторе, однако он отлично работает в браузере. Я не уверен, что я здесь делаю.

Вот фрагмент кода javascript, который срабатывает при каждом нажатии на элемент

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

Полный фрагмент кода

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

Любая идея?

Источник

1 ответ

Решение

Вы не ждете в своем JavaScript, пока загрузка страницы не будет завершена, поэтому

 //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.
 });

Выполняется еще до того, как dom даже загружен. Поэтому ни один из элементов в dom ниже этого кода не будет иметь этого обработчика щелчков.

Вы должны инкапсулировать свой код в обратный вызов готового документа:

$( 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.
    });
});
Источник
Другие вопросы по тегам