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

Posted on 2014-09-13
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 500 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

Stressed Out?

Watch some penguins on the livecam!

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

705 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