Вывод динамического бутстрапа, не работающий на мобильных устройствах

Question

У меня есть два раскрывающихся списка Bootstrap 3.0, один для книги и один для главы (для справки, сайт, над которым я работаю, - http://www.jbtbible.com/mobile). Html для обоих выпадающих списков находится в одном файле (я их настроил как группа btn), причем список книг жестко закодирован, а список разделов заполняется динамически, используя jquery после загрузки кнопок. Я использую jquery для регистрации выбора и управления книгами/разделами оттуда. Это отлично работает во всех браузерах для настольных компьютеров, которые я пробовал, и выбор книг работает в мобильных браузерах, но выбор главы не работает в мобильных браузерах (он создает список, но выбор опции ничего не делает). Я не могу понять, какая разница, потому что сгенерированный код выглядит одинаково между ними, а выбор регистрируется одинаково для обоих.

Вот некоторые из соответствующих частей кода:

В моем заголовке я это в качестве заполнителя для кнопок раскрывающихся:

<div class="book-btn-fill"> 
</div> 

Это заполняется с помощью этой функции Jquery:

var bookList = ["JBTHome", "Galatians","Ephesians","Philippians", "Philemon"]; 
var chapterList = [1,6,6,2,1]; 

function loadText() { 
    $(".book-btn-fill").load('../book-selection-dropdown.html', function() { 
     $(".book-button").html('<b>' + bookList[curBook] + '</b>'); 
     $(".chapter-button").html('<b>' + curChapter + '</b>'); 
     var chapters = ""; 
     for (var i = 1; i <= chapterList[curBook]; i++) { 
      chapters = chapters + '<li><a class="nav-chapter-btn" data-value="' + i + '">' + i + '</a></li>'; 
     } 
     $(".chapter-menu-fill").html(chapters); 
     var height = $(window).height(); 
     $(".dropdown-menu").css("max-height", height - 85 + "px"); 
    }); 
    $(".body-text").load('../books/' + bookList[curBook] + '/' + curChapter + '.html', function() { 
     applyOptions(); 
     $(".body-text").css("font-size", textSize + "px"); 
    }); 
} 

С книжным выбором-dropdown.html, похожим на это (я вырезал большинство вариантов книги, чтобы было более управляемым):

<div class="btn-group"> 
    <div class="btn-group"> 
    <button type="button" class="btn btn-default btn-sm dropdown-toggle book-button" data-toggle="dropdown"></button> 
    <ul class="dropdown-menu" role="menu"> 
     <li><a class="nav-book-btn" data-value="1">Galatians</a></li> 
     <li><a class="nav-book-btn" data-value="2">Ephesians</a></li> 
     <li><a class="nav-book-btn" data-value="3">Philippians</a></li> 
     <li class="disabled"><a>Colossians</a></li> 
     <li class="disabled"><a>1 Thessalonians</a></li> 
    </ul> 
    </div> 
    <div class="btn-group"> 
    <button type="button" class="btn btn-default btn-sm dropdown-toggle chapter-button" data-toggle="dropdown"></button> 
    <ul class="dropdown-menu chapter-menu-fill" role="menu"> 
    </ul> 
    </div> 
</div> 

И, наконец, зарегистрировать выбор со следующими функциями:

$(document).on('click', '.nav-book-btn', function() { 
    curBook = $(this).data("value"); 
    curChapter = 1; 
    loadText(); 
}); 
$(document).on('click', '.nav-chapter-btn', function() { 
    curChapter = $(this).data("value"); 
    loadText(); 
}); 

Так почему бы эта работа на компьютерах, а также создавать списки правильно на мобильном телефоне, но не позволяют выбирающий опцион в список глав на мобильном телефоне?

Answer 1

Я не уверен, почему это было проблемой, но все, что нужно было исправить, это изменение css, чтобы установить курсор на указатель для ссылок в раскрывающемся списке главы.

Я заметил, что наведение не было согласовано между двумя выпадающими списками и добавило css, чтобы сделать их одинаковыми, и теперь навигация работает по всем направлениям. Если кто-нибудь знает, почему изменение стиля влияет на возможность щелчка ссылки, я бы с удовольствием услышал, но это то, что исправлено.