在准备好文档的平板电脑设备上使用jQuery的单击功能不起作用

Question

I am not a JS developer, I am just a Web Designer dealing with simple JS interaction most of the time.

I am using jquery-1.11.3 and jquery.mobile v1.4.5 with just core features and slider capability. As tablet I have a kindle with the firefox (beta) browser and an ipod with safari browser.

I am having a problem in understanding some JS behaviours of tablets and browsers regarding the click event function and document ready

$(function(){
  $('.menu-ham').click(function(){
    alert("test")
  });
});

the click event doesn't work on tablets but it works perfectly on web browsers.

Instead if use this outside the document ready

$(document).on('click', '.menu-ham', function(){
    alert("test")
})

it works like a charm. Only that I am not sure if this it would create problem with the browser because not inside document.ready

I tried to use as well

$(function(){
  $('.menu-ham').on('click', function(){
    alert("test")
  });
});

inside or outside the document ready and nothing works.

"menu-ham" it is a button with that class. I read about a lot of topics, who said to use cursor:pointer, who said to use ".on('click'" instead of the normal click event, or vclick, or bind or touchstart but none really worked a part the solution that I offered, and now I am very confused about the whole thing on why is working and the other are not when I read a lot of comments that the other solution should work.

Any help would be very much appreciated, thank you!

Answer 1

I found the problem! it was all fault of Phalcon debugbar. On the mobile devices was generating an error that it wasn't happening on the normal browser. This error was making any jquery or selectors working.

Thank you for your help and support!