Issue in jquery left panel in windows phone 8

Question

I am making windows hybrid app.

I have used panel widget ( like hamburger) of jquery mobile. But its not working properly.

When I open it , click on any menu item and again click on panel icon (left hand top icon), then it vanishes.

Kindly help me out regarding the same

code for your reference:

<script type="text/javascript" src="js/MyNetwork.js"></script>
    <script id="panel-init">
        $(function() {
            $("body>[data-role='panel']").panel();
        });
    </script>

<div data-role="panel" id="leftpanel3" data-position="left"
         data-display="reveal"
         style="background-color: #6a666c; line-height: 3em; width: 80%;">


        <ul data-role="listview" data-inset="true"
            style="list-style: none; padding-left: 0px;">
            <li><a href="#emergency" style="text-decoration: none;"
                   onclick='generateEmergencyList();'><img
                        src="img/navbutton_SOS.png" class="ui-li-icon">
                    <div>
                        <span>Send Emergency Message</span>
                    </div></a></li>
            <li><a href="#search" style="text-decoration: none;"><img
                        src="img/navbutton_search_selected.png" class="ui-li-icon">
                    <div>
                        <span>Search</span>
                    </div></a></li>
            <li><a href="#mynetwork" style="text-decoration: none;" onclick="loadMyNetwork();"><img
                src="img/navbutton_mynetwork_selected.png" class="ui-li-icon">
                <div>
                    <span>My Network</span>
                </div></a></li>
            <li><a href="#one" style="text-decoration: none;"><img
                        src="img/navbutton_interest_selected.png" class="ui-li-icon">
                    <div>
                        <span>Colleagues with my Interests</span>
                    </div></a></li>
        </ul>
        <div style="border-bottom: solid 1px;">Settings</div>
        <ul data-role="listview" data-inset="true"
            style="list-style: none; padding-left: 0px;">
            <!--                <li><a href="#one" style="text-decoration: none;"><img src="css/images/icons-png/calendar-black.png"  class="ui-li-icon"><div><span>Settings</span></div></a></li>-->
            <li><a href="#feedback" style="text-decoration: none;"><img
                        src="img/navbutton_feedback_selected.png" class="ui-li-icon">
                    <div>
                        <span>Feedback</span>
                    </div></a></li>

            <li><a href="#help" style="text-decoration: none;"><img
                        src="img/navbutton_help_selected.png" class="ui-li-icon">
                    <div>
                        <span>Help</span>
                    </div></a></li>
            <li><a href="#about" style="text-decoration: none;"><img
                        src="img/navbutton_about_selected.png" class="ui-li-icon">
                    <div>
                        <span>About</span>
                    </div></a></li>
            <li><a href="#emergency_message" style="text-decoration: none;"><img
                        src="img/navbutton_SOSsetting_unselected.png" class="ui-li-icon">
                    <div>
                        <span>Emergency Message Settings</span>
                    </div></a></li>
            <li><a href="" style="text-decoration: none;"
                   onclick="logoutUser();"><img
                        src="img/navbutton_logout_unselected.png" class="ui-li-icon">
                    <div>
                        <span>Logout</span>
                    </div></a></li>

            <li><a href="#myprofile" style="text-decoration: none;"
                   id="myprofile_a_id" data-transition="flow" onclick="preloginajax();"><img
                        src="img/user_profile_silhouette.png" class="ui-li-icon"
                        id="menu_profileimg">
                    <div style="line-height: 20px;">
                        <span><div style="margin-top: 7px; font-size: 20px;"
                                   id="menu_profileName"></div>
                            <p id="menu_profileAddress" style="margin-top: 0px;"></p> </span>
                    </div></a></li>
        </ul>
    </div>

Answer 1

I am also having the same problem in WP8. I can see that the click() event is fired even after navigating to a menu item. But the slide doesn't work. Which version of jQuery are you using?

The workaround which worked for me is adding the function below.

$(document).on('click', '#menu', function () {                
    $("#menu").panel("open");
});