Jquery 动态引导下拉列表在移动设备上不起作用

我有两个Bootstrap3.0下拉列表，一个用于book，一个用于chapter（作为参考，我正在使用的站点是）。两个下拉列表的html都在一个文件中（我将它们设置为btn组），图书列表被硬编码，章节列表在按钮加载后使用jquery动态填充。我使用jquery注册所选内容并从中管理书籍/章节。这在我尝试过的所有桌面浏览器上都能正常工作，书籍选择在移动浏览器上也能正常工作，但章节选择在移动浏览器上不起作用（它构建了列表，但选择一个选项却没有任何作用）。我不知道会有什么区别，因为生成的代码在两者之间看起来完全相同，而选择在两者中注册时是相同的

以下是一些相关的代码：

在我的标题中，我将此作为下拉按钮的占位符：

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

---

那么，为什么这可以在台式机上工作，并在移动设备上正确生成列表，但不允许在移动设备上的章节列表中选择选项呢？

我不确定为什么会出现这个问题，但解决这个问题所需的只是更改css，将光标设置为章节下拉列表中链接的指针

我注意到两个下拉列表之间的悬停不一致，并添加了css以使它们保持一致，现在导航可以全面工作。如果有人知道为什么风格改变会影响点击链接的能力，我很想听听，但这就是解决问题的方法

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");
    });
}

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