无法在iOS Safari中的Bootstrap下拉菜单中选择选项

Question

我使用Bootstrap下拉菜单并使用DOM动态填充它。

HTML代码 ..

<div class="col-md-6">
    <div class="input-group">
        <div class="input-group-button">
            <label for="category">Category</label><br />
            <button id="dropdownbuttoncategory" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" required> Category <span class="caret"></span></button>
            <ul id="dropdownmenucategory" class="dropdown-menu" role="menu">
            <!--li being populated dynamically--> 
            </ul>
        </div>
    </div>
</div>  

JavaScript代码

       //populate li's dynamically
        function loadCategoryDropdownContinued(obj){
        var ul = document.getElementById("dropdownmenucategory");

        var li = document.createElement("li");
        li.id = catName;
        li.className = "category";

        li.innerHTML = obj.catName;

        var lidivider = document.createElement("li");
        lidivider.className = "divider";

        ul.appendChild(lidivider);
        ul.appendChild(li);

        getNextCategory(catName);
    }

    //code to get selected li 
    $(document).on("click",".category",function(event){         //to see which option is selected from dropdown category
        var text = document.getElementById(event.target.id).innerHTML;
        document.getElementById("dropdownbuttoncategory").innerHTML = text;             

    });

我测试了这段代码，除了iOS中的Safari之外，它的工作正常。下拉列表会动态填充，但无法选择任何选项。无法理解我哪里出错了。请帮忙......