CODEWITHSUNDEEP
jquerycordovajquery-mobileandroid-emulator
shoujo_sm
shoujo_sm

Reputation: 3203

PhoneGap + JqueryMobile click not function for android emulator

I am using 

<link rel="stylesheet" href="css/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" charset="utf-8" src="js/cordova-1.7.0.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.1.0.min.js"></script>

I can click div when I test with my browser but if I tried it in my android emulator 4.0, it does not show any response. I read online sources said that jquery mobile click should use $(document).live('click',function()..) and my code is

<div data-role="content">             
        <p><img level='1' src="css/images/level1.png"/><a id="level" level="1" href="wordlist.html" data-role="button" data-theme="a">Home</a></p>
        <p><img level='2' src="css/images/level2.png"/><a id="level" level="2" href="wordlist.html" data-role="button" data-theme="a">School</a></p>
        <p><img level='3' src="css/images/level3.png"/><a id="level" level="3" href="wordlist.html" data-role="button" data-theme="a">Restaurant</a></p>

</div>

<script type="text/javascript" charset="utf-8">
$('a#level').live('click', function () {
    alert("XX"+ $(this).attr("level"));
    sessionStorage.StudyLevel = $(this).attr("level"); 
});
</script>

alert showed in my browser but nothing happen in my emulator. Same goes with other swipe and tap event not execute in my emulator. Have I missed something?

Upvotes: 1

Views: 2879

Answers (3)

Rahul Lamkhade
Rahul Lamkhade

Reputation: 19

Try to change sequence in jquery files in header like

<link rel="stylesheet" href="css/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/cordova-1.7.0.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.1.0.min.js"></script>
<script>
$(function() {
   $('a#level').bind('click', function(event, ui) {
     //code here.
   });
});
</script>

And let me know is this worked or not.

Upvotes: 1

Suave Nti
Suave Nti

Reputation: 3747

Did you tried with class rather than id:- 

<div data-role="content">             
    <p><img level='1' src="css/images/level1.png"/><a id="level1" class='selCls' level="1" class="handler" href="wordlist.html" data-role="button" data-theme="a">Home</a></p>
    <p><img level='2' src="css/images/level2.png"/><a id="level2" class='selCls'  level="2" class="handler" href="wordlist.html" data-role="button" data-theme="a">School</a></p>
    <p><img level='3' src="css/images/level3.png"/><a id="level3" class='selCls'  level="3" class="handler" href="wordlist.html" data-role="button" data-theme="a">Restaurant</a></p>

And also

 $('body').on('click', '.selCls', function(e) {
  e.preventDefault();
      e.stopImmediatePropagation();
      alert('clicked');
 });

Upvotes: 1

JOBG
JOBG

Reputation: 4624

According to phonegap documentation you should listen to this event before everything else:

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    // Now safe to use the Cordova API
    // Put your code here
}

For events attachment you can use (recommended) jquery .on()

You also have duplicate ids for imgs, thats not recomended. You can use a dummy class and search for that instead like:

<div data-role="content">             
        <p><img level='1' src="css/images/level1.png"/><a id="level1" level="1" class="handler" href="wordlist.html" data-role="button" data-theme="a">Home</a></p>
        <p><img level='2' src="css/images/level2.png"/><a id="level2" level="2" class="handler" href="wordlist.html" data-role="button" data-theme="a">School</a></p>
        <p><img level='3' src="css/images/level3.png"/><a id="level3" level="3" class="handler" href="wordlist.html" data-role="button" data-theme="a">Restaurant</a></p>

</div>

<script type="text/javascript" charset="utf-8">
$('a.handler').on('click', function () {
    alert("XX"+ $(this).attr("level"));
    sessionStorage.StudyLevel = $(this).attr("level"); 
});
</script>

Upvotes: -1

Related Questions