onClick event in jQuery mobile do not work

Question

I am new to jQuery and have made a page with some buttons i want to do some actions when they are clicked.

When I execute the code on my laptop with chrome, it works fine. But when I execute it from my mobile phone (also with chrome) it do not activate the function.

I have tried to google for hours to find a solution and have tried something like:

    $(document).on('pagebeforeshow', '#front', function(){ 
        $(document).on('click', '#ssStart', function(){ 
            alert('Alerted!');       
        });    
    });

but I cannot get it to work.

Can anyone please help me?

How can you possibly close the DIV `.ui-grid-solo` using `
`?? Please... your demo is a good principle of minified issue example, but please, at least close your elements adequatey. — Roko C. Buljan, Jun 01 '15 at 20:43
Also, you don't have to use `` tags in jsFiddle or jsBin (BTW, I find jsBin by far faster and better to test HTML, CSS...) — Roko C. Buljan, Jun 01 '15 at 20:46
Ok. I am brand new to jsFiddle as well. I cannot see that i close .ui-grid-solo with
. As I see it it is closed with — Mads, Jun 01 '15 at 20:48

score 1 · Accepted Answer · answered Jun 01 '15 at 20:55

1

Through a mobile browser, a tap is registered differently than a click so for your buttons you have to change their pointers to cursors through CSS

    #start, #prev, #next{
    cursor: pointer;
}

answered Jun 01 '15 at 20:55

user2809321

196
1
3
17

score 0 · Answer 2 · answered Jun 01 '15 at 20:50

0

I have changed your code just a little bit in this:

https://jsfiddle.net/1uuduxtL/

$(function() {
    $("#start").click(function() {
       alert("start"); 
    });
    $("#prev").click(function() {
        alert("prev");
    });
    $("#next").click(function() {
        alert("next");
    });
})();

answered Jun 01 '15 at 20:50

MrCrimsonKing

34
3

I just tried it on my own server, and there it did not work. But I can see that you have change the jQuery version in jsFiddle to 2.1.0. Perhaps that could be the case – Mads Jun 01 '15 at 20:56
It might not work locally because this isn't waiting for the page to be 'ready' before attempting to execute jQuery functions. I'd suggest instead of using an IIFE to use `$(document).ready(function() { //code })` to insure jQuery is on the page before this executes. – galitskyd Jun 01 '15 at 20:59
1

@galitskyd Actually, the ready event may be inaccurate in some instances due to the way jQuery Mobile processes data. See [this question](http://stackoverflow.com/questions/14468659/jquery-mobile-document-ready-vs-page-events) for more details. jQuery Mobile in some cases _"creates"_ pages via ajax. In this case, the ready event will have fired prior to the data being returned. Look for the `pagecreate` event or in older versions the `pageinit` event. – War10ck Jun 01 '15 at 21:02

onClick event in jQuery mobile do not work

2 Answers2