Phonegap-jquery compatibility issue on Android

Question

I am working on a phonegap project that has a sliding panel that closes after clicking any button on this panel, and also loads data.
I did this while working on my Nexus 4, but the main problem arose when I checked the LG Optimus G Pro, the slider does not close after clicking, it needs to be closed explicitly. A strange thing is the same problem has occurred on the entire Samsung device.

Below is the slider code

<script> $(document).on("pageinit", "#demo-page", function() { $(document).on("swipeleft swiperight", "#demo-page", function(e) { // We check if there is no open panel on the page because otherwise // a swipe to close the left panel would also open the right panel (and vv). // We do this by checking the data that the framework stores on the page element (panel: open). if ($.mobile.activePage.jqmData("panel") !== "open") { if (e.type === "swipeleft") { $("#dvAppSideMenu").panel("open"); } else if (e.type === "swiperight") { $("#left-panel").panel("open"); } } }); }); </script> <div data-role="panel" id="left-panel" data-theme="b"> <div id="dvPageButton" class="pageHeaderMenu shadowSmall"> <div class="scrollArea"> <a id="aWall_Main" data-action="home" class="mainWall"> <div data-target="1"> Home </div> </a> <a href="#maincontent" data-target="1" data-subtarget="0" data-section="secDataZero" class="dont shadowInset" data-rel="close">ABC</a> <a href="#maincontent" data-target="1" data-subtarget="1" data-section="secDataOne" class="dont shadowInset" data-rel="close">PQR</a> <a href="#maincontent" data-target="1" data-subtarget="2" data-section="secDataTwo" class="dont shadowInset" data-rel="close">XYZ</a> <a class="dont shadowInset setting-btn" href="#" >Setting</a> </div> </div> <div class="theme-button"> <a class="th-btn1" href="#" data-rel="close"><span>Theme A</span></a> <a class="th-btn2" href="#" data-rel="close"><span>Theme B</span></a> <a class="th-btn3" href="#" data-rel="close"><span>Theme C</span></a> <a class="th-btn4" href="#" data-rel="close"><span>Theme D</span></a> <a class="th-btn5" href="#" data-rel="close"><span>Theme E</span></a> </div> </div> 

Note. This phonegap application may not work in the browser.

Does anyone have an idea why the problem?

Answer 1

Have you tried Alpha 2 jQuery Mobile 1.4. They did (and do) a lot of panel work in this version.