Getting div data-role panel via ajax

Getting div data-role panel via ajax

Hi there!

I have a question in this code.

  1. $(function(){
  2. var menuPanel;
  3. $(document).on("pagecreate", function(){
            $.ajax({
                url: 'server.php',
                data: 'action=left-panel',
                type: 'POST',
                success: function(data){
                    $('#left-panel').html(data).trigger("create");
                }
            });
        });









  4.     $('#left-panel').on("tap", function(){
            $('#left-panel a').on("tap",function(){
                    menuPanel = $(this).attr("data-rel");
            });
            alert(menuPanel);
        });




  5. });
The id #left-panel is a div role panel in a html file. The menu in this panel will be get by $.ajax request. All the tags <ul>, <li> and <a> are on a mysql database. All I want is to get the data-rel value when I click on the menu. The menu has 5 options and I want to the the data-rel value on each one while clicking or tapping.
The problem is: when I click for the first time, the value of menuPanel is "undefinied". The correct value will just appear when I click for the second time. What am I doing wrong with this code?

The html file has:

  1. <div data-role="panel" id="left-panel" class="ui-panel-animate" data-display="reveal">

    </div>


and the server.php has:

  1. <?php
        ob_start();
        session_start();
           
        $action = mysql_real_escape_string($_POST['action']);



  2. switch($action){
        
            case 'left_panel':
                echo '<ul data-role="listview" data-theme="a" class="slidemenu" data-filter="true" data-filter-placeholder="Filtrar itens...">
                <li data-icon="delete"><a href="#" data-rel="close" >Fechar menu</a></li>
                <li data-icon="home"  data-theme="c"><a href="#pagina_principal">Página Principal</a></li>
                <li data-icon="arrow-r" ><a href="#previsao" data-rel="previsao">Previsão do Tempo</a></li>
                <li data-icon="arrow-r" ><a href="#jogos" data-rel="jogos">Jogos</a></li>
                <li data-icon="arrow-r" ><a href="#facebook" data-rel="facebook">Facebook</a></li>
                <li data-icon="arrow-r" ><a href="#tradutor" data-rel="tradutor">Tradutor</a></li>
            </ul>';
               
            break;
            default:
                echo 'Error';
            break;
        }
        ob_end_flush();
    ?>


















I've tried to do this before:

  1.     $('#left-panel a').tap(function(){
            menuPanel = $(this).data("rel");
            alert(menuPanel);
        });



But it only works if I put all the listview in the html file. It does not work getting by $.ajax

Thanks