Problem adding click event handler with JQuery Mobile in Android Browser
So it seems I was simply doing it the old fashioned JQuery way when there is actually a JQuery Mobile way of doing these things now. Here is the correct code.
$('#page').live('pagecreate',function(event){
console.log('page loaded');
$(".tweetjack").live('tap',function(event) {
console.log('test');
});
});
Caimen
Experience: HTML, CSS, Javascript, JQuery, ASP.NET C#, Microsoft SQL Server, PHP, MySQL, Java for Android, Objective-C for IOS (XCode), Node JS, Mongo DB
Updated on June 14, 2022Comments
-
Caimen about 2 years
I am having a strange problem with the android browser. Hopefully this is something I am doing fundamentally wrong and not a JQuery bug. I have tried the following code in Firefox and Chrome which work fine. However when I try it in the Android browser, clicking on the Get Tweets button does not work. It seems to be an issue with JQuery Mobile because when I add the event to a normal non JQuery Mobile object it binds correctly and the console.log fires. I have tried with both alpha and beta versions of JQuery Mobile with no luck.
<!DOCTYPE html> <html> <head> <style type="text/css" rel="stylesheet" > .chkTag { color: black; } /*.chkFeed { color: black; }*/ </style> <link rel="stylesheet" href="twitter/style/jquery.mobile-1.0a4.1.min.css" /> <script type="text/javascript" src="twitter/js/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="twitter/js/jquery.mobile-1.0a4.1.js"> </script> <script type="text/javascript"> $(document).ready(function() { $(".tweetjack").click(function() { console.log('test'); }); console.log('page loaded'); }); </script> <style type="text/css"> .profile img { width: 48px; height: 48px; display: inline; float: left; padding-right: 10px; } /*.ui-collapsible-contain { max-height: 950px; min-height: 950px; }*/ </style> </head> <body> <div id="page" data-role="page" data-theme="d"> <div id="header" data-role="header"> <h1>Twitter App</h1> </div> <div data-role="content"> <div id="1" class="tweetjack" data-role="collapsible" data-collapsed="true"><h3>Get Tweets</h3><p id="text1"></p><div data-role="collapsible" data-collapsed="true"><h3 date-theme="a">Filter</h3></div></div> </div> <div id="footer" data-role="footer"> <a class="tweetjack"><h2>BT</h2></a> </div> </div> </body> </html>
This script also fails in android browser only.
$('#page').live('pagecreate',function(event){ console.log('page loaded'); $(".tweetjack").click(function() { console.log('test'); }); });