Мобильные JQuery настраивают горизонтальные переключатели не работают в реальных устройствах

Question

Недавно я задал вопрос на Stackru, что Как настроить горизонтальные радиокнопки jQuery-mobile Вы также можете просмотреть сообщение по этой ссылке Как настроить горизонтальные радиокнопки jQuery-mobile. Разработчик очень кратко ответил на вопрос с очень хорошим примером JSFiddle. В соответствии с его инструкцией я установил пользовательскую радио-кнопку JQuery Mobile, и все это отлично работает в настольных браузерах.

Однако, когда я проверил на реальных устройствах (Galaxy S 2, IPhone 5, Mac симуляторы и Android симуляторы), и это не работает, как работает настольный браузер. Я не уверен, что здесь не так, но я могу понять, что для поддержки реальных устройств мне нужно сделать небольшой твик. Я не очень хорош в JS, поэтому, может кто-нибудь, пожалуйста, посмотрите на это как можно скорее.

Вот предыдущий пример JSFiddle, выполненный 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;
}

Я создал отдельную ссылку, надеюсь, это поможет вам быстро проверить на устройствах. http://www.apartmentslanka.com/ztest_calender/radio.html

* Stackru FYI: я пытался продолжить с предыдущего поста, но так как ответственный разработчик не смог ответить или проверить последний вопрос, я создал новый пост.

Answer 1

Вы действительно должны быть терпеливыми, я был в отпуске:)

Вот рабочий пример: http://jsfiddle.net/Gajotres/779Kn/20/

И эта версия должна работать как на сенсорных устройствах, так и в настольных браузерах: http://jsfiddle.net/Gajotres/779Kn/21/

Событиеклика было изменено на событие сенсорного запуска, и теперь оно также работает на мобильных устройствах.

$(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);
        }        
    });   
});

Answer 2

Еще один дополнительный комментарий (в случае, если кто-то ответит на этот вопрос в будущем) - более новые версии JQueryMobile предоставляют событие "vclick", которое аналогично поиску "сенсорного запуска" на мобильных устройствах и "щелчка" на рабочем столе. браузеры.