JQuery mobile customize horizontal radio buttons are not working in Actual Devices

Question

Recently I asked a question on Stackoverflow that How to customize horizontal jQuery-mobile radio buttons you can also view the post from this link How to customize horizontal jQuery-mobile radio buttons . A developer very cursorily answered the question with very good JSFiddle example. According to his instruction I implemented the custom JQuery Mobile radio button and it's all working fine in desktop browsers.

However when I checked on actual devices (Galaxy S 2, IPhone 5, Mac simulators and Android simulators) and it's not working as like desktop browsers acts. I'm not sure what's wrong here but I can understand there is a small tweak I need to do to support for actual devices. I'm not good at JS therefore, could anyone please look into this ASAP.

Here is the Previous JSFiddle example done by Gajotres http://jsfiddle.net/Gajotres/779Kn/

$(document).on('pagebeforeshow', '#index', function(){     
    $('<div>').addClass('checkBox').appendTo('fieldset div div.ui-radio label');
    $('input[type="radio"]').each(function(){        
        ($(this).is(':checked')) ? $(this).next().find(".checkBox").addClass('checked') : $(this).next().find(".checkBox").addClass('not-checked');
    });

    $(document).on('click', '.ui-radio', function(){      
        $('input[type="radio"]').each(function(){  
            $(this).next().find(".checkBox").addClass('not-checked').removeClass('checked');
        });

        if($(this).find('input[type="radio"]').is(':checked')){
           $(this).find('label div.checkBox').removeClass('checked').addClass('not-checked');
           $(this).find('input[type="radio"]').attr('checked' , false);
        } else {
           $(this).find('label div.checkBox').removeClass('not-checked').addClass('checked');             
           $(this).find('input[type="radio"]').attr('checked' , true);
        }        
    });   
});

.checkBox{
    width: 18px;
    height: 18px;
    background: #d9d9d9;
    border-radius: 3px;  
    margin: 0 auto;
    margin-bottom: 5px;
}

.not-checked, .checked {
    background-image: url("http://www.fajrunt.org/icons-18-white.png");
    background-repeat: no-repeat;
}

.not-checked {
    background-position: -18px 0;       
    background-color:#d9d9d9;
}

.checked {
    background-position: -720px 0;    
    background-color:#6294bc;
}

I created a separate link hope this will help you to quickly check on devices. http://www.apartmentslanka.com/ztest_calender/radio.html

*Stackoverflow FYI: I tried to continue from previous post but since the responsible developer unable to answer or check the last issue I created a new post.

Answer 1

Just one additional comment (in case someone happens upon this question in the future) - the newer versions of JQueryMobile provide the "vclick" event which is the same thing as looking for "touch start" on mobile devices, and "click" on desktop browsers.

Answer 2

You really need to be patient, I was on holiday :)

Here's a working example: http://jsfiddle.net/Gajotres/779Kn/20/

And this version should work on touch devices and desktop browsers alike: http://jsfiddle.net/Gajotres/779Kn/21/

Click event was changed to touchstart event, and now it also works on mobile devices.

$(document).on('pagebeforeshow', '#index', function(){     
    $('<div>').addClass('checkBox').appendTo('fieldset div div.ui-radio label');
    $('input[type="radio"]').each(function(){        
        ($(this).is(':checked')) ? $(this).next().find(".checkBox").addClass('checked') : $(this).next().find(".checkBox").addClass('not-checked');
    });

    $(document).on('touchstart', '.ui-radio', function(){      
        $('input[type="radio"]').each(function(){  
            $(this).next().find(".checkBox").addClass('not-checked').removeClass('checked');
        }); 

        if($(this).find('input[type="radio"]').is(':checked')){
           $(this).find('label div.checkBox').removeClass('checked').addClass('not-checked'); 
           $(this).find('input[type="radio"]').attr('checked' , false);
        } else {
           $(this).find('label div.checkBox').removeClass('not-checked').addClass('checked');             
           $(this).find('input[type="radio"]').attr('checked' , true);
        }        
    });   
});