jQuery click() событие внутри другого события click() не будет работать на мобильном телефоне

Question

Я ищу сделать мобильное меню, которое открывается с правой стороны страницы, отображая соответствующую навигацию после ее отображения. Im использует плагин sidr.js для создания скользящего перехода, и все навигационные дисплеи прекрасны. У меня есть полное меню мобильного телефона на компьютере, и все выглядит великолепно и функционирует так, как я этого хочу.

Однако, когда я переключаюсь на мобильный телефон и перехожу на сайт, у навигации есть главный недостаток. Я поместил кнопку в верхней части области навигации, которая закрывает боковую навигацию, когда ее щелкают. Ниже приведена функция, выполняющая эту задачу, и на компьютере это нормально. Проблема в том, что он не будет работать на мобильных телефонах! Пожалуйста, помогите, я смущен, почему это не работает.

$(document).on('click', 'a.btn.btn-default.mobile-btn', function(event) { 
    event.preventDefault(); 
    $("#responsive-menu-button").click(); 
}); 

Вы можете также просмотреть проблему жить в http://mgm702.github.io, но вы должны быть на мобильном устройстве, чтобы заметить проблему. Кроме того, я уже пробовал вариант cursor: pointer; среди других, и он не сработал.

Answer 1

Я нашел решение, которое сработало для моей конкретной ситуации. Я использовал Sidr.js Plugin, и одна из функций - встроенная функция, которая закрывает слайдер меню. Я привязал это к функции, которую я использовал в настоящее время, и это исправило проблему. Затем меню работало с сенсорным интерфейсом мобильного устройства. Моя конечная функция выглядит так:

$(document).on('click touchstart', 'a.btn.btn-default.mobile-btn', function(event) { 
    event.preventDefault(); 
    $.sidr('close','sidr-main'); 
}); 

Я надеюсь, что этот anwser поможет кому-то в будущем решить эту проблему!

Answer 2

Добавление data-role="button" к вашему responsive-menu-button должно выполнять эту работу.