jquery links and buttons problem in mobile devices but works on desktop perfectly

Posted on 2014-09-13
Medium Priority
Last Modified: 2014-09-13
Hi experts,

I change in the moment my entire portal from old desktop version to new responsive version with help of foundation 5 and jquery. Layout etc. works perfect and my site looks in large, medium and small devices perfect and the layout moves and changes together with the screen resolution. I say this to explain that in desktop everything works perfect.

But I have trouble in mobile devices (I tested on android) somehow my jquery events dont work anymore. I use in many places things like this example:

		$('a.comment').livequery("click", function(e){
			var getpID =  $(this).parent().attr('id').replace('commentBox-','');	
			var comment_text = $("#commentMark-"+getpID).val();
			var keepID = $('#keepID').val();
			if(comment_text != "Escreva um comentário")
				$.post("PT/docs/add_comment.php?comment_text="+comment_text+"&post_id="+getpID+'&x='+keepID, {
				}, function(response){
					$("#commentMark-"+getpID).val("Escreva um comentário");					

Open in new window

to catch the click on some link like
<a href="" id="comment">test</a>

Open in new window

. For some reason this does not work in my mobile device and a click at the button does not do anything. Now I read in lots of sites to change the click into tap by doing: $('a.comment').livequery("click tap", function(e){ but this does not change anything. I am also confused because I think livequery is not existing anymore but I dont know any alternative for this site. It is best described as facebook wall clone inside my portal which load dynamic all kind of things like text, photos etc.

The strange thing for me is that if I choose on my mobile chrome browser to request the desktop version the site works flawlessly. The layout remain the same because it continue to use anyway the Foundation 5 SMALL version and does look perfect in mobile plus all the buttons and functions work. but if not requested desktop version the buttons are dead.

What can I do? Should (can) I force always delivery of desktop version? This does not make a difference for my layout anyway because all is optimized for screen resolution and not for type of browser mobile and desktop.

Or should I change the jquery functions and how? I tried plenty of things since more than 2 days but dont get it work.

I appreciate your help experts, thx
Question by:Oliver2000
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
LVL 82

Expert Comment

ID: 40320900
you need to use touch events for mobile.

$('a.comment').livequery("click touchstart", function(e){

Open in new window


Author Comment

ID: 40321018
Hello leakim971,

Thank you for your reply but this does not really help me. I am aware of the problem that the original onclick dont work well and I need somehow touch events but I don't understand what I need to do in order to change my example above. Can you give me an example based on the function I posted in my example? I am by far not a javascript expert and don't get much further with the example in your link. My concern in this case is also the livequery and how I change this into mobile working version because I am not sure what livequery does different than an normal "on" method.

I apologize in advance if I am a little slow on this, I am relatively new to this and never worked much with jquery anyway.

Thank you for your help
LVL 82

Accepted Solution

leakim971 earned 2000 total points
ID: 40321083
not sure what is you jquery version, go to the jquery site to get the latest one.
so you should be able to replace $('a.comment').livequery("click", function(e){
by : $(document).on("click touchstart", 'a.comment', function(e){

Author Closing Comment

ID: 40321302
@leakim971, you have no idea how I appreciate your help. this works flawlessly for me. I tried many things, variations etc. but somehow did not hit it like you did in your exmaple. My mistake was somehow the $(document) plus it was not working inside $(document).ready(function() but now is working perfect.

You saved not only my weekend but my entire next week for sure...
thank you for your help.
LVL 82

Expert Comment

ID: 40321308
it's good to read, have a nice week-end

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question